@charset "UTF-8";
.kv-animation-elem {
  will-change: transform, animation, opacity;
}
.kv-animation-elem.kv-animation-end {
  will-change: auto;
}

.top-sec#culture,
.top-sec#faq {
  padding-top: clamp(0px, 5.1388888889vw, 103.6px);
  padding-bottom: clamp(0px, 12.3611111111vw, 249.2px);
  background: #FBC400;
}

/* -----------------------------
@map flip-card
----------------------------- */
.flip-card-grp._1 {
  -webkit-transform: translate3d(0, 0, 10px);
  transform: translate3d(0, 0, 10px);
}

.flip-card {
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: 1000ms ease-in-out;
  transition-delay: 200ms;
}
.flip-card._2 {
  transition-delay: 400ms;
}
.flip-card.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.flip-card.show.front {
  -webkit-transform: translate3d(0, 0, 5px);
  transform: translate3d(0, 0, 5px);
}

.card-person .img {
  -webkit-transform: translate3d(0, 0, 5px);
  transform: translate3d(0, 0, 5px);
}

/* -----------------------------
@map Lead text
----------------------------- */
#KV .lead-text {
  opacity: 0;
  transform: translate(-50px, 0px);
  transition-duration: 1500ms;
  transition-timing-function: cubic-bezier(0, 0, 0, 1);
  transition-delay: 1000ms;
}
#KV .lead-text.run {
  opacity: 1;
  transform: translate(0px, 0px) !important;
  will-change: transform, opacity;
}
#KV .lead-text._2 {
  transform: translate(-30px, 0px);
  transition-timing-function: ease-in-out;
  transition: 1000ms;
  transition-delay: 1500ms;
}

/* -----------------------------
@map SVG path
----------------------------- */
:root {
  --stroke-dasharray: 0;
  --stroke-dashoffset: 0;
}

/*
@note ラインパス
*/
.na {
  display: none;
}

.pen-animation {
  width: pc(405);
  height: pc(116);
  --stroke-dasharray: 472px;
  --stroke-dashoffset: 472px;
}
.pen-animation.run {
  --stroke-dashoffset: 0px;
}

svg.line-path {
  width: 100%;
  height: auto;
}
svg.line-path image {
  width: 100%;
  height: 100%;
}
svg.line-path path {
  stroke-width: 4px;
  isolation: isolate;
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: var(--stroke-dashoffset);
  transition: 1000ms ease-in-out;
}

/*
@note テキストパス
*/
.identity-txt {
  width: pc(351);
  height: pc(211);
  overflow: visible;
  --stroke-dasharray: 1695px;
  --stroke-dashoffset: 1695px;
  -webkit-transform: translate3d(0, 0, 11px);
  transform: translate3d(0, 0, 11px);
}
.identity-txt.run {
  --stroke-dashoffset: 0px;
}
.identity-txt svg.text-path {
  width: 100%;
  height: auto;
}
.identity-txt svg.text-path image {
  width: 100%;
  height: 100%;
}
.identity-txt svg.text-path path {
  stroke-width: 12px;
  isolation: isolate;
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: var(--stroke-dashoffset);
  transition: 2000ms ease-in-out;
}

/*
@note = = KVのアニメーション
*/
@keyframes KV-flip-card-1 {
  0% {
    transform: rotateY(1deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@keyframes KV-flip-card-2 {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
:root {
  --kv-flip-duration:1000ms;
  --kv-flip-dellay:0ms;
  --iteration: 1;
}

.flip-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  --kv-flip-animation: KV-flip-card-1 var(--kv-flip-duration) var(--kv-flip-dellay) ease-in both var(--iteration);
}
.flip-card._2 {
  --kv-flip-dellay:300ms;
  --kv-flip-animation: KV-flip-card-1 var(--kv-flip-duration) var(--kv-flip-dellay) ease-in both var(--iteration);
}
.flip-card.moveout {
  --kv-flip-animation: KV-flip-card-2 var(--kv-flip-duration) var(--kv-flip-dellay) ease-out both var(--iteration);
  --kv-flip-dellay:0ms !important;
}
.flip-card.moveout .kv-animation-elem {
  animation-delay: 0ms !important;
}

.card-person {
  animation: var(--kv-flip-animation);
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  animation-play-state: paused;
}
.card-person img {
  transform: translate3d(0, 0, 1px);
}
.card-person img {
  backface-visibility: hidden !important;
}
.card-person.moveout {
  animation: var(--kv-flip-animation-2);
  backface-visibility: hidden !important;
}
.run .card-person {
  animation-play-state: running;
  will-change: transform, animation, opacity;
}
.card-person ._2 {
  display: none;
}
.card-person[data-count="2"] ._1, .card-person[data-count="3"] ._1 {
  display: none;
}
.card-person[data-count="2"] ._2, .card-person[data-count="3"] ._2 {
  display: block;
}
.card-person .back {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.card-bg {
  animation: var(--kv-flip-animation);
  animation-play-state: paused;
  transform-style: preserve-3d;
  overflow: visible;
}
.card-bg.cover {
  z-index: 3 !important;
}
.card-bg .perspective {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotateY(90deg);
}
.card-bg.moveout {
  animation: var(--kv-flip-animation-2);
}
.run .card-bg {
  animation-play-state: running;
}




/* ------------------------------------------
   Reset
------------------------------------------ */
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, font, 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;
  font-style: normal;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
}

* {
  outline: none;
}

body {
  line-height: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

blockquote {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th {
  text-align: left;
}

a:focus {
  outline: none;
}

a img {
  border: none;
}

input, button, select, textarea {
  border-radius: 0;
}

@media screen and (max-width: 767px) {
  input, button, select, textarea {
    -webkit-appearance: none;
  }
}
body.showBlk * {
  background-color: rgba(255, 0, 0, 0.2);
}

body.showBlk * * {
  background-color: rgba(0, 255, 0, 0.2);
}

body.showBlk * * * {
  background-color: rgba(0, 0, 255, 0.2);
}

body.showBlk * * * * {
  background-color: rgba(255, 0, 255, 0.2);
}

body.showBlk * * * * * {
  background-color: rgba(0, 255, 255, 0.2);
}

body.showBlk * * * * * * {
  background-color: rgba(255, 255, 0, 0.2);
}

body.showBlk * * * * * * * {
  background-color: rgba(255, 0, 0, 0.2);
}

body.showBlk * * * * * * * * {
  background-color: rgba(0, 255, 0, 0.2);
}

body.showBlk * * * * * * * * * {
  background-color: rgba(0, 0, 255, 0.2);
}

:root {
  --rpx: 0.0694444444vw ;
  --rpxClamp: clamp(0px, var(--rpx), 1.4px);
}
@media screen and (max-width: 767px) {
  :root {
    --rpx: 0.2666666667vw ;
  }
}

/* -----------------------------
@map 繧ｫ繧ｹ繧ｿ繝�螟画焚
----------------------------- */
:root {
  --max-width: clamp(0px, 69.4444444444vw, 1400px);
  /* 驟崎牡 */
  --color-accent: #95E1D7;
  --color-gray-bg: #E1E1E1;
  --color-gray-mig-bg: #F5F2F2;
  --color-gray-lite-bg: #f4f4f4;
  --color-brown: #7A6151;
  --color-black-text: #0E1A19;
  --color-gray-hairline: #AAAAAA;
  --color-gray-hairline-lite: #E8E8E8;
  --color-white: #FFFFFF;
  --color-unnamed-color-5f5e5e: #5F5E5E;
  --color-section-header-en:var(--color-accent);
  --color-placeholder-text:#CECECE;
  /* 莠碁嚴螻､莉･髯� */
  /* 繝輔か繝ｳ繝� */
  --font-default: "Noto Sans JP",sans-serif;
  --font-ja: "Noto Sans JP",sans-serif;
  --font-en: century-gothic, sans-serif;
  --lineheight-adjust-notosansjp: 0.745em;
  --top-adjust-notosansjp: -0.0745em;
  /* 繝医Λ繝ｳ繧ｸ繧ｷ繝ｧ繝ｳ */
  --cta-transition-default: 200ms ease-out;
  /* 隗剃ｸｸ */
  --round-size: clamp(0px, 2.0833333333vw, 42px);
  --round-size-mid: clamp(0px, 1.3888888889vw, 28px);
  --round-size-small: clamp(0px, 0.6944444444vw, 14px);
  /* 繝懊�繝€繝ｼ */
  --border-dashed: 0.5px dashed #AAAAAA;
  /* gnavi繝倥ャ繝€繝ｼ */
  --header-height: clamp(0px, 2.5vw, 50.4px);
  --header-total-height: clamp(0px, 7.0833333333vw, 142.8px);
  --header-margin: clamp(0px, 2.2916666667vw, 46.2px) clamp(0px, 2.7777777778vw, 56px);
  --header-cta-gap: clamp(0px, 2.7777777778vw, 56px);
  /* 繝壹�繧ｸ繝輔ャ繧ｿ繝ｼ */
  --page-footer-height: clamp(0px, 39.5833333333vw, 798px);
  /* 繝輔ャ繧ｿ繝ｼ */
  --footer-padding: clamp(0px, 6.9444444444vw, 140px) 0;
  /* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ */
  --section-padding-top:clamp(0px, 9.7222222222vw, 196px);
  --section-padding-bottom: clamp(0px, 10.4166666667vw, 210px);
  /* 莠碁嚴螻､莉･髯� */
  /* 譛ｬ譁� */
  --text-content-fz-large: clamp(0px, 2.2222222222vw, 44.8px);
  --text-content-fz-mid: clamp(0px, 1.3888888889vw, 28px);
  --text-content-fz: clamp(0px, 1.1111111111vw, 22.4px);
}
@media screen and (max-width: 767px) {
  :root {
    --max-width: 100%;
  }
}
:root .recruit-secondary-page {
  --color-page-bg: #F5F2F2;
}
:root .recruit-secondary-page#recruit-benefit-systems, :root .recruit-secondary-page#recruit-faw {
  --color-page-bg: #fff;
}
@media screen and (max-width: 767px) {
  :root {
    --round-size: clamp(0px, 4vw, 21px);
    --round-size-mid: clamp(0px, 2.6666666667vw, 14px);
    --round-size-small: clamp(0px, 1.3333333333vw, 7px);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --header-height: clamp(0px, 6.4vw, 33.6px);
    --header-margin: clamp(0px, 5.3333333333vw, 28px) clamp(0px, 5.3333333333vw, 28px);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --page-footer-height: clamp(0px, 71.2vw, 373.8px);
    --page-footer-markie-height: clamp(0px, 34.4vw, 180.6px);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --footer-padding: 0;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --section-padding-top:clamp(0px, 18.6666666667vw, 98px);
    --section-padding-bottom: clamp(0px, 17.6vw, 92.4px);
  }
}
:root .recruit-secondary-page h2 {
  --section-title-fz-en: clamp(0px, 3.8888888889vw, 78.4px);
}
@media screen and (max-width: 767px) {
  :root .recruit-secondary-page h2 {
    --section-title-fz-en: clamp(0px, 8.5333333333vw, 44.8px);
  }
}
@media screen and (min-width: 768px) {
  :root .recruit-secondary-page {
    --section-padding-v: clamp(0px, 11.1111111111vw, 224px);
  }
}
@media screen and (max-width: 767px) {
  :root .recruit-secondary-page {
    --section-padding-v-top: clamp(0px, 10.6666666667vw, 56px);
    --section-padding-v-bottom: clamp(0px, 16vw, 84px);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --text-content-fz-large: clamp(0px, 4.8vw, 25.2px);
    --text-content-fz-mid: clamp(0px, 1.3888888889vw, 28px);
    --text-content-fz: clamp(0px, 3.7333333333vw, 19.6px);
  }
}

/* -----------------------------
@map 繝代�繝�
----------------------------- */
/* 
@note 繝懊ち繝ｳ 
*/
.btn-cta {
  --color: var(--color-black-text);
  --bg-bolor: #000;;
  --border-color: #FFF;
  --hover-color:#FFF ;
  --hover-bg-bolor:#000;;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-en);
  transition: var(--cta-transition-default);
  height: 100%;
  width: clamp(0px, 9.1666666667vw, 184.8px);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  background: var(--bg-bolor);
}
.btn-cta:hover {
  --color: var(--hover-color);
  --bg-bolor: var(--hover-bg-bolor);
  --border-color: var(--color-black-text) ;
}
.btn-cta span {
  font-weight: 500;
  color: #FFF;
  font-size: clamp(0px, 1.1111111111vw, 22.4px);
}

.btn-wrap {
  margin-top: clamp(0px, 3.4722222222vw, 70px) !important;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(0px, 0.5555555556vw, 11.2px);
  --this-border-transform:translateY(clamp(0px, 0.5555555556vw, 11.2px)) scale(0, 1);
}
@media screen and (max-width: 767px) {
  .btn-link {
    gap: clamp(0px, 2.1333333333vw, 11.2px);
  }
}
.btn-link:hover, .btn-link:focus, .btn-link:active {
  --this-border-transform:translateY(clamp(0px, 0.5555555556vw, 11.2px)) scale(1, 1);
}
.btn-link span {
  font-size: clamp(0px, 1.25vw, 25.2px);
  color: var(--color-black-text);
}
@media screen and (max-width: 767px) {
  .btn-link span {
    font-size: clamp(0px, 4.2666666667vw, 22.4px);
    color: #262727;
  }
}
.btn-link span:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: var(--color-black-text);
  transform: var(--this-border-transform);
  transition: 300ms;
  transform-origin: 0% 0%;
}

.btn-rect {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-Zen-Maru-Gothic);
  background: #fff;
  height: 80px;
  border-radius: var(--btn-rect-radius);
  flex-grow: 1;
  transition: var(--cta-transition-default);
}
@media screen and (max-width: 767px) {
  .btn-rect {
    border-radius: clamp(0px, 2.6666666667vw, 14px);
    height: clamp(0px, 16vw, 84px);
  }
}
.btn-rect span {
  font-weight: 500 !important;
  font-size: var(--btn-rect-fz);
  color: var(--color-brown);
  display: block;
}
.btn-rect:hover {
  background-color: var(--color-accent);
}
.btn-rect:hover span {
  color: #fff;
}

.btn-circle-anchor {
  display: block;
  --btn-circle-size: clamp(0px, 2.7777777778vw, 56px);
  --btn-circle-anchor-size: clamp(0px, 0.5555555556vw, 11.2px);
  cursor: pointer;
  width: var(--btn-circle-size);
  height: var(--btn-circle-size);
  background: var(--btn-circle-bg-color);
  border-radius: 100%;
  border: 1px solid var(--btn-circle-border-color);
  position: relative;
}
.btn-circle-anchor.left {
  transform: rotate(90deg);
}
.btn-circle-anchor.right {
  transform: rotate(-90deg);
}
@media screen and (max-width: 767px) {
  .btn-circle-anchor {
    --btn-circle-size: clamp(0px, 10.6666666667vw, 56px);
    --btn-circle-anchor-size: clamp(0px, 2.1333333333vw, 11.2px);
  }
}
.btn-circle-anchor:before {
  content: "";
  display: block;
  width: var(--btn-circle-anchor-size);
  height: var(--btn-circle-anchor-size);
  inset: -10% 0 0 0;
  position: absolute;
  margin: auto;
  transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0);
  border: 1px solid var(--btn-circle-inner-color);
  border-width: 0 0 1px 1px;
}
.btn-circle-anchor:hover:before {
  border-color: #fff;
}

.btn-circle-close {
  cursor: pointer;
  --btn-circle-size: clamp(0px, 4.1666666667vw, 84px);
  width: var(--btn-circle-size);
  height: var(--btn-circle-size);
  background: #fff;
  border-radius: 100%;
  border: 1px solid var(--color-accent);
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--color-accent);
}
@media screen and (max-width: 767px) {
  .btn-circle-close {
    --btn-circle-size: clamp(0px, 10.6666666667vw, 56px);
    font-size: clamp(0px, 3.2vw, 16.8px);
  }
}
.btn-circle-close:hover {
  background: var(--color-accent);
  color: #fff;
}

/*
@note 繧｢繝ｭ繝ｼ
*/
:root {
  --arrow-size:clamp(0px, 3.75vw, 75.6px);
  --arrow-bg-color: #fff;
  --arrow-inner-color: var(--color-black-text);
  --arrow-transform: translateX(0%);
  --arrow-transition: 300ms;
}
@media screen and (max-width: 767px) {
  :root {
    --arrow-size: clamp(0px, 11.2vw, 58.8px);
  }
}

.arrow {
  width: var(--arrow-size);
  height: var(--arrow-size);
  background:#000;
  --arrow-transform: translateX(0%);
  border-radius: 100%;
  transition: var(--arrow-transition);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;


  
  color: #FFF !important;
}
@media screen and (min-width: 768px) {
  a:hover .arrow, .arrow:hover {
    --arrow-bg-color: var(--color-black-text);
    --arrow-inner-color: #fff;
    --arrow-transform: translateX(30%);
  }
}
@media screen and (max-width: 767px) {
  a:active .arrow, .arrow:active {
    --arrow-bg-color: var(--color-black-text);
    --arrow-inner-color: #fff;
    --arrow-transform: translateX(30%);
  }
}
.arrow:before {
  color: var(--arrow-inner-color);
  transform: var(--arrow-transform);
  transition: var(--arrow-transition);
  font-size: calc(var(--arrow-size) * 0.17);
}

.arrow i{
  color: #FFF;
}

@media screen and (max-width: 767px) {
  .arrow:before {
    font-size: calc(var(--arrow-size) * 0.19);
  }
}

/* -----------------------------
@map 蜈ｨ闊ｬ
----------------------------- */
html {
  font-size: clamp(0px, 0.6944444444vw, 14px);
  font-family: var(--font-default);
}
@media screen and (max-width: 767px) {
  html {
    font-size: clamp(0px, 2.6666666667vw, 14px);
  }
}
@media screen and (max-width: 767px) {
  html.noscroll {
    overflow: hidden;
  }
}

body {
  margin: 0;
  font-size: 1.6rem;
  color: var(--color-black-text);
  font-family: var(--font-default);
  background: #fff;
}
body * {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: var(--color-black-text);
}
a.na {
  pointer-events: none;
}
a:hover:not(.btn-link) {
  color:#000;
  opacity: 0.7;
}
a:hover .img img, .img a:hover img {
  transform: scale(1.05);
}
@media screen and (min-width: 768px) {
  a.pc-na {
    pointer-events: none;
    display: block;
  }
}

p {
  font-size: 1.6rem;
  text-align: justify;
  line-height: 1.8;
  font-weight: 300;
}
@media screen and (max-width: 767px) {
  p {
    font-size: 1.3rem;
  }
}

.ja {
  font-family: var(--font-ja);
  font-weight: 400;
}

.en {
  font-family: var(--font-en);
  font-weight: 400;
}

.stretch {
  width: 100%;
  text-align: justify;
  text-align-last: justify;
}

p.click-note {
  text-align: right;
}
@media screen and (max-width: 767px) {
  p.click-note {
    font-size: clamp(0px, 3.2vw, 16.8px);
  }
}

.img {
  overflow: hidden;
}
.img img:not(.static, .js-static-size) {
  display: block;
  transition: var(--cta-transition-default);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}
/*
@note 繝�く繧ｹ繝医Μ繝ｳ繧ｯ
*/
.ar {
  text-align: right;
}

main {
  overflow: hidden;
}

/* -----------------------------
@map 隕句�縺�
----------------------------- */
:root {
  --header-color: var(--color-accent);
}

.section-title {
  --title-fz-en: clamp(0px, 6.6666666667vw, 134.4px);
  --title-fz-ja: clamp(0px, 1.6666666667vw, 33.6px);
  --title-gap: clamp(0px, 0vw, 0px);
  --title-color: var(--color-black-text);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  display: inline-flex;
  line-height: 1;
  gap: var(--title-gap);
  color: var(--title-color);
}
@media screen and (max-width: 767px) {
  .section-title {
    --title-fz-en: clamp(0px, 16vw, 84px);
    --title-fz-ja: clamp(0px, 3.4666666667vw, 18.2px);
  }
}
.section-title.M {
  --title-fz-en: clamp(0px, 5vw, 100.8px);
  --title-fz-ja: clamp(0px, 1.1111111111vw, 22.4px);
  --title-gap: clamp(0px, 0.625vw, 12.6px);
}
@media screen and (max-width: 767px) {
  .section-title.M {
    --title-fz-en: clamp(0px, 10.6666666667vw, 56px);
    --title-fz-ja: clamp(0px, 3.4666666667vw, 18.2px);
    --title-gap: sp(4);
  }
}
.section-title.S {
  --title-fz-en: clamp(0px, 3.8888888889vw, 78.4px);
  --title-fz-ja: clamp(0px, 1.1111111111vw, 22.4px);
  --title-gap: clamp(0px, 0.3472222222vw, 7px);
}
@media screen and (max-width: 767px) {
  .section-title.S {
    --title-fz-en: clamp(0px, 9.6vw, 50.4px);
    --title-fz-ja: clamp(0px, 3.4666666667vw, 18.2px);
    --title-gap: clamp(0px, 0.8vw, 4.2px);
  }
}
.section-title.S.ja {
  --title-fz-ja: calc(32 * var(--rpxClamp));
  --title-fz-en: calc(16 * var(--rpxClamp));
  --header-color: var(--color-black-text);
}
.section-title.S.ja .ja {
  line-height: 1.4375;
}
@media screen and (max-width: 767px) {
  .section-title.S.ja {
    --title-fz-ja: calc(20 * var(--rpxClamp));
    --title-fz-en: calc(12 * var(--rpxClamp));
  }
}
.section-title.SS {
  --title-fz-en: clamp(0px, 3.3333333333vw, 67.2px);
  --title-fz-ja: clamp(0px, 1.1111111111vw, 22.4px);
  --title-gap: clamp(0px, 0.3472222222vw, 7px);
}
@media screen and (max-width: 767px) {
  .section-title.SS {
    --title-fz-en: clamp(0px, 9.6vw, 50.4px);
    --title-fz-ja: clamp(0px, 3.4666666667vw, 18.2px);
    --title-gap: clamp(0px, 0.8vw, 4.2px);
  }
}
.section-title.W {
  --title-color: #fff;
}
.section-title.center {
  display: flex;
}
.section-title.center span {
  width: auto;
}
.section-title span {
  width: 100%;
}
.section-title span i {
  display: block;
}
.section-title .en {
  font-weight: normal;
  font-size: var(--title-fz-en);
  line-height: 1.22;
  color: var(--header-color);
}
.section-title .ja {
  font-size: var(--title-fz-ja);
  line-height: 1;
}
.section-title .ja i {
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .header-cheers {
    font-size: calc(26 * var(--rpxClamp));
    gap: calc(25 * var(--rpxClamp));
  }
}
@media screen and (min-width: 768px) {
  .header-cheers .en {
    height: clamp(0px, 2.7083333333vw, 54.6px);
  }
}
@media screen and (min-width: 768px) {
  .header-cheers .ja {
    height: clamp(0px, 1.6666666667vw, 33.6px);
  }
}

/* -----------------------------
@map 繝ｪ繧ｹ繝�
----------------------------- */
:root {
  --card-list-gap:clamp(0px, 2.0833333333vw, 42px);
}

.card-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(auto);
  gap: var(--card-list-gap);
  --btn-circle-border-color:var(--color-black-text);
}
@media screen and (max-width: 767px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}
.card-list li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: clamp(0px, 1.9444444444vw, 39.2px);
}
@media screen and (max-width: 767px) {
  .card-list li {
    width: 100%;
    gap: clamp(0px, 2.1333333333vw, 11.2px);
  }
}
.card-list li hgroup {
  display: block;
  align-items: center;
  grid-template-columns: 1fr auto;
}
.card-list li h3 {
  font-size: clamp(0px, 1.6666666667vw, 25.6px);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: clamp(0px, 0.5555555556vw, 11.2px);
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .card-list li h3 {
    gap: clamp(0px, 1.3333333333vw, 7px);
    font-size: clamp(0px, 4.8vw, 25.2px);
  }
}
.card-list li h3 * {
  width: 100%;
}
.card-list li h3 span {
  display: block;
  font-weight: bolder;
}
.card-list li h3 .sub {
  font-size: clamp(0px, 1.1111111111vw, 22.4px);
}
@media screen and (max-width: 767px) {
  .card-list li h3 .sub {
    font-size: clamp(0px, 3.2vw, 16.8px);
  }
}
.card-list li i.arrow {
  border: 0.5px solid var(--btn-circle-border-color);
}

/* -----------------------------
@map 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
----------------------------- */
/*
@note scroll 繧｢繝ｳ繧ｫ繝ｼ縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
*/
@keyframes scroll-anchor {
  0% {
    left: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 100%;
  }
}
/* 
@note 隕∫ｴ�縺ｮinvew繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
 */
:root {
  --inview-animation-start: scale(.97) translate(0, 50px);
  --inview-animation-end: scale(1) translate(0, 0);
  --inview-animation-transition: opacity 1s ease-out, transform 1000ms ease-out;
}
@media screen and (max-width: 767px) {
  :root {
    --inview-animation-start: scale(.97) translate(0, 50px);
  }
}

.inview-animate-once {
  opacity: 0;
  transform: var(--inview-animation-start);
  transition: var(--inview-animation-transition);
}
@media screen and (max-width: 767px) {
  .inview-animate-once {
    transition-delay: 0s !important;
  }
}
.inview-animate-once.no-delay {
  transition-delay: 0s !important;
}
.inview-animate-once.inview-0 {
  opacity: 1;
  transform: var(--inview-animation-end);
}
.inview-animate-once.inview-0 + .inview-animate-once {
  transition-delay: 100ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once {
  transition-delay: 200ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 300ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 400ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 500ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 600ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 700ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 800ms;
}


.interview-index {
  position: absolute;
  z-index: 2;
  top: clamp(0px, 3.6111111111vw, 72.8px);
  right: clamp(0px, 9.0277777778vw, 182px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-weight: bold;
  width: clamp(0px, 4.3055555556vw, 86.8px);
  width: auto;
  color: var(--color-gray-hairline);
}

.top-sec#people .card-list .img .interview-index .number {
  font-size: clamp(0px, 3.3333333333vw, 67.2px);
}


.top-sec#people .card-list .img .interview-index {
  z-index: 2;
  width: clamp(0px, 3.75vw, 75.6px);
  top: clamp(0px, 1.3888888889vw, 28px);
  right: clamp(0px, 1.3888888889vw, 28px);
  transform: none;
  color: var(--color-accent);
}

.top-sec#people .card-list .img .interview-index .number {
  font-size: clamp(0px, 3.3333333333vw, 67.2px);
}

.interview-index .number::before {
  counter-increment: number 1;
  content: counter(number, decimal-leading-zero) " ";
}


.interview-index .number::before {
  counter-increment: number 1;

  content: counter(number, decimal-leading-zero) " ";

}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list .img .interview-index .number {
    font-size: clamp(0px, 12.5333333333vw, 65.8px);

  }
}

/*
@note 繝�繝ｼ繝薙�蜀咲函繝懊ち繝ｳ縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
*/
@keyframes rotate-playbutton {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
/*
@note 繝�繝ｼ繝薙�閭梧勹縺ｮ繧ｺ繝ｼ繝�繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
*/
@keyframes zoom-movie-bg {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}
/* @note 莨夂､ｾ繧堤衍繧九�繝ｼ繧ｭ繝ｼ */
:root {
  --slide-w: clamp(0px, 40.8333333333vw, 823.2px);
}
@media screen and (max-width: 767px) {
  :root {
    --slide-w: clamp(0px, 83.7333333333vw, 439.6px);
  }
}

@keyframes company-slide-markie {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--slide-w) * -4));
  }
}
/* 繝壹�繧ｸ繝輔ャ繧ｿ繝ｼ縺ｮ繝槭�繧ｭ繝ｼ */
@keyframes page-footer-slide-markie {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: calc(clamp(0px, 128.3333333333vw, 2587.2px)*-4) 0;
  }
}
@media screen and (max-width: 767px) {
  @keyframes page-footer-slide-markie {
    from {
      background-position: 0% 0%;
    }
    to {
      background-position: calc(clamp(0px, 80.8vw, 424.2px)*-4) 0;
    }
  }
}
/* -----------------------------
@map 繝｢繝ｼ繝€繝ｫ繧ｦ繧｣繝ｳ繝峨え
----------------------------- */
div.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #eee;
  display: grid;
  place-content: center;
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: 500ms;
}
div.modal:target {
  pointer-events: auto;
  opacity: 1;
}
div.modal:target .inner {
  opacity: 1;
  transform: translateY(0);
}
div.modal:target iframe {
  display: block !important;
}
div.modal .inner {
  position: relative;
  width: clamp(0px, 69.4444444444vw, 1400px);
  background: var(--color-black-text);
  transition: 1000ms cubic-bezier(0, 0.94, 0.58, 1) 500ms;
  opacity: 0;
  transform: translateY(50px);
}
@media screen and (max-width: 767px) {
  div.modal .inner {
    width: 100vw;
  }
}
div.modal .inner iframe {
  display: none;
  width: 100%;
  height: auto;
}
div.modal .inner .close {
  position: absolute;
  top: 0;
  right: clamp(-14px, -0.6944444444vw, 0px);
}
@media screen and (min-width: 768px) {
  div.modal .inner .close {
    transform: translateX(100%);
  }
}
@media screen and (max-width: 767px) {
  div.modal .inner .close {
    right: clamp(0px, 2.6666666667vw, 14px);
    width: clamp(0px, 9.6vw, 50.4px);
    top: clamp(-14px, -2.6666666667vw, 0px);
    transform: translateY(-100%);
  }
  div.modal .inner .close img {
    width: 100% !important;
    height: auto !important;
  }
}

/* -----------------------------
@map 繝倥ャ繝€繝ｼ繝ｻ繧ｰ繝ｭ繝ｼ繝舌Ν繝翫ン
----------------------------- */


.site-logo {
  z-index: 11;
  pointer-events: auto;
  justify-self: flex-start;
  grid-column: 1;
  height: clamp(0px, 2.2222222222vw, 44.8px);
  gap: clamp(0px, 0.625vw, 12.6px);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: calc(33 * var(--rpxClamp));
  left: calc(40 * var(--rpxClamp));
  --webkit-mix-blend-mode: var(--brendmode);
  mix-blend-mode: var(--brendmode);
  color: #000;
}
@media screen and (max-width: 767px) {
  .site-logo {
    height: clamp(0px, 75.533vw, 33.8px);
    gap: clamp(0px, 3.667vw, 11px);
    top: calc(20 * var(--rpxClamp));
    left: calc(20 * var(--rpxClamp));
  }
}
.site-logo .logo {
  transition: 1000ms;
  width: clamp(0px, 10.8333333333vw, 218.4px);
  height: 100%;
  background-image: var(--header-site-logo-img);
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .site-logo .logo {
    width: clamp(0px, 302.4vw, 167.6px);
  }
}
.site-logo .logo.w {
  --header-site-logo-img: url(../img/global/b-site-logo-w@2x.png);
}
.site-logo .en {
  font-size: 14px;
  color: #000;
  letter-spacing: 0.05em;
  font-weight: 400;
  padding-top: 21px;
}
@media screen and (max-width: 767px) {
  .site-logo .en {
    font-size: 11px;
  }
}

.js-toggle-gnav {
  z-index: 11;
  --bar-scale: scale(50%, 100%);
  --this-text: "MENU";
  --this-color: #000;
  position: fixed;
  top: calc(33 * var(--rpxClamp));
  right: calc(40 * var(--rpxClamp));
  --webkit-mix-blend-mode: var(--brendmode);
  mix-blend-mode: var(--brendmode);
  pointer-events: auto;
  width: clamp(0px, 2.7777777778vw, 56px);
  height: var(--header-height);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  justify-content: flex-start;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .js-toggle-gnav {
    top: calc(12 * var(--rpxClamp));
    right: calc(20 * var(--rpxClamp));
  }
}
@media screen and (min-width: 768px) {
  .js-toggle-gnav:hover {
    --bar-scale: scale(100%, 100%);
  }
}
@media screen and (max-width: 767px) {
  .js-toggle-gnav {
    width: clamp(40px, 9.0666666667vw, 51.6px);
    height: 45px;
    padding: 6px;
    background: #FEE603;
  }
}
.js-toggle-gnav i {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: clamp(0px, 0.6944444444vw, 14px);
  justify-content: space-between;
  width: 100%;
  top: clamp(0px, 0.3472222222vw, 7px);
  position: relative;
}
@media screen and (max-width: 767px) {
  .js-toggle-gnav i {
    height: clamp(0px, 1.8666666667vw, 9.8px);
    top: 0;
  }
}
.js-toggle-gnav i:after, .js-toggle-gnav i:before {
  content: "";
  height: 1px;
  background: var(--this-color);
  width: 100%;
  transform-origin: left top;
  transition: 300ms;
}
.js-toggle-gnav i:after {
}
.js-toggle-gnav span {
  line-height: clamp(0px, 1.1805555556vw, 23.8px);
}
@media screen and (max-width: 767px) {
  .js-toggle-gnav span {
    line-height: 1.25;
  }
}
.js-toggle-gnav span:before {
  color: var(--this-color);
  content: var(--this-text);
  font-size: clamp(0px, 0.9722222222vw, 19.6px);
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
  font-weight: bold;
  font-family: var(--font-en);
  margin-top: auto;
  margin-bottom: 0;
  position: absolute;
  bottom: 3px;
  left: 0;
}
@media screen and (max-width: 767px) {
  .js-toggle-gnav span:before {
    font-size: clamp(0px, 3.2vw, 10.8px);
  }
}
.show-gnav .js-toggle-gnav {
  --this-text: "CLOSE";
  --this-color: #000;
  transition: 500ms;
  border-color: #000;
}
.show-gnav .js-toggle-gnav i {
  position: relative;
  transition: 300ms;
  top: clamp(0px, 0.5555555556vw, 11.2px);
}
@media screen and (max-width: 767px) {
  .show-gnav .js-toggle-gnav i {
    top: clamp(0px, 0.5333333333vw, 2.8px);
  }
}
.show-gnav .js-toggle-gnav i:after, .show-gnav .js-toggle-gnav i:before {
  transform-origin: center center;
  transform: rotateZ(19deg) !important;
  transition: 300ms;
  position: absolute;
}
.show-gnav .js-toggle-gnav i:after {
  transform: rotateZ(-19deg) !important;
}

#recruit-global-header .cta-container {
  pointer-events: auto;
  z-index: 3;
  mix-blend-mode: normal;
}
@media screen and (max-width: 767px) {
  #recruit-global-header .cta-container {
    display: none !important;
  }
}

.cta-container {
  display: block;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .cta-container {
    display: none;
  }
}
.cta-container .inner {
  height: var(--header-height);
  margin: var(--header-margin);
  display: grid;
  grid-template-columns: 1fr auto clamp(0px, 2.7777777778vw, 56px);
  align-items: center;
  justify-content: flex-start;
  gap: var(--header-cta-gap);
}
.cta-container .inner .btn-cta {
  grid-column: 2;
  pointer-events: auto;
}

/*
@note 繧ｰ繝ｭ繝ｼ繝舌Ν繝翫ン
*/
#global-navi {
  --this-color: #fff;
  position: fixed !important;
  top: 0;
  left: 0;
  height: 100dvh;
  background: #fff;
  width: 100vw;
  z-index: 5;
  pointer-events: none;
  /*
    @note 繝｡繝九Η繝ｼ
  */
}
.show-gnav #global-navi {
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  #global-navi {
    padding-top: clamp(0px, 18.6666666667vw, 98px);
    overflow-y: scroll;
    overscroll-behavior: contain;
    height: 100%;
  }
}
#global-navi .bg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background-image: url(../img/global/gnav-bg-img@3x.jpg);
  background-size: cover;
  background-position: top center;
}
@media screen and (max-width: 767px) {
  #global-navi .bg {
    position: fixed;
    background-image: url(../img/global/gnav-bg-img-sp@3x.jpg);
  }
}
#global-navi #gnavi-inner-placeholder {
  --menu-color: #fff;
  --menu-fz:clamp(0px, 1.1111111111vw, 22.4px);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(0px, 3.75vw, 75.6px) clamp(0px, 6.25vw, 126px);
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder {
    --menu-fz: clamp(0px, 3.4666666667vw, 18.2px);
  }
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
#global-navi #gnavi-inner-placeholder * {
  color: #FFF;
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder {
    width: 100%;
    padding: 0 clamp(0px, 5.3333333333vw, 28px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
}
#global-navi #gnavi-inner-placeholder .menu-list {
  font-size: var(--menu-fz);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(0px, 0.9027777778vw, 18.2px);
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder .menu-list .btn-circle-anchor {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .menu-list {
    gap: 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding: clamp(0px, 2.6666666667vw, 14px) 0 clamp(0px, 5.3333333333vw, 28px);
    transition: 1000ms cubic-bezier(0, 0.94, 0.58, 1);
    transition-delay: 0;
  }
  #global-navi #gnavi-inner-placeholder .menu-list:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder .menu-list li {
    width: 100%;
  }
}
#global-navi #gnavi-inner-placeholder .menu-list li a {
  display: block;
  line-height: 1.07;
  white-space: nowrap;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd {
  font-size: var(--menu-fz);
  margin-bottom: calc(clamp(0px, 1.875vw, 37.8px) - clamp(0px, 0.9027777778vw, 18.2px));
  overflow: hidden;
  position: relative;
  width: 100%;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd a {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  display: inline-flex;
  width: auto;
  gap: clamp(0px, 0.4861111111vw, 9.8px);
  transform: translateY(100%);
  transition: 1000ms cubic-bezier(0, 0.94, 0.58, 1);
  transition-delay: 0;
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .menu-list li.hd a {
    gap: clamp(0px, 1.3333333333vw, 7px);
  }
}
.show-gnav #global-navi #gnavi-inner-placeholder .menu-list li.hd a {
  transition-delay: 300ms !important;
  transform: translateY(0%);
  color: #000;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd a > * {
  width: 100%;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd .en {
  font-size: 2.5em;
  line-height: 1.25;
  font-weight: 400;
  color: #000;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd .ja {
  font-size: 1em;
  line-height: 1;
  font-weight: 500;
  color: #2D8E3B;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd .btn-circle-anchor {
  --btn-circle-size: clamp(0px, 8.5333333333vw, 44.8px);
  --btn-circle-bg-color: linear-gradient(90deg, rgba(65, 164, 253, 1), rgba(14, 244, 255, 1));;
  --btn-circle-anchor-size: 6px;
  --btn-circle-inner-color: #fff;
  position: absolute;
  top: clamp(0px, 3.2vw, 16.8px);
  right: 0;
  left: auto;
  bottom: 0;
  margin: auto;
}
#global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) {
  font-size: var(--menu-fz);
  transform: translateY(100%);
  opacity: 0;
  transition: 1000ms cubic-bezier(0, 0.94, 0.58, 1);
  transition-delay: 0;
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) {
    height: 0;
  }
  #global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) a {
    opacity: 0;
  }
}
.show-gnav #global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) {
  transition-delay: 600ms !important;
  transform: translateY(0%);
  opacity: 1;
  color: #000;
}
#global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) a {
  font-weight: 300;
  color: #000;
}
#global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) a:before {
  content: "ー ";
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .menu-list.open {
    gap: 1.2em;
  }
}
#global-navi #gnavi-inner-placeholder .menu-list.open li:not(.hd) {
  height: auto;
}
#global-navi #gnavi-inner-placeholder .menu-list.open li:not(.hd) a {
  opacity: 1;
  transition: 500ms ease-in-out;
  transition-delay: 300ms;
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder .btn-entry-wrap {
    grid-column: 3/5;
  }
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .btn-entry-wrap {
    width: 100%;
    display: block;
    padding: clamp(0px, 10.6666666667vw, 56px) clamp(0px, 5.3333333333vw, 28px);
    height: auto;
  }
  #global-navi #gnavi-inner-placeholder .btn-entry-wrap a {
    width: 100%;
    height: clamp(0px, 29.6vw, 155.4px);
  }
}
#global-navi #gnavi-inner-placeholder .secondary_menu {
  font-size: var(--menu-fz);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0px, 1.25vw, 25.2px);
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder .secondary_menu {
    grid-column: 1/3;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .secondary_menu {
    justify-content: center;
    grid-column: 1/3;
    order: 2;
    gap: 1em;
  }
}
#global-navi #gnavi-inner-placeholder .secondary_menu > * {
  width: 100%;
}
#global-navi #gnavi-inner-placeholder .secondary_menu .row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0px, 2.0833333333vw, 42px);
  justify-content: flex-start;
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .secondary_menu .row {
    gap: clamp(0px, 7.7333333333vw, 40.6px);
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .secondary_menu .row a {
    font-size: clamp(0px, 3.2vw, 16.8px);
  }
  
  
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder .secondary_menu .row a {
    font-size: 0.75em;
    color: #000;
  }
  
  #global-navi #gnavi-inner-placeholder .secondary_menu .row #footer-site-logo {
  display: block;
  width: 100%;
}
  #global-navi #gnavi-inner-placeholder .secondary_menu .row #footer-site-logo img {
    margin-bottom: 5px
  }
  
}
#global-navi #gnavi-inner-placeholder .secondary_menu address {
  font-size: 1em;
  font-weight: 400;
  color: #000;
}
#global-navi #gnavi-inner-placeholder .btn-entry-wrap,
#global-navi #gnavi-inner-placeholder .secondary_menu {
  transform: translateY(10%);
  opacity: 0;
  transition: 1000ms cubic-bezier(0, 0.94, 0.58, 1);
  transition-delay: 0;
}
.show-gnav #global-navi #gnavi-inner-placeholder .btn-entry-wrap,
.show-gnav #global-navi #gnavi-inner-placeholder .secondary_menu {
  opacity: 1;
  transition-delay: 900ms !important;
  transform: translateY(0%);
}

@media screen and (max-width: 767px) {
  .sns-link-wrap {
    position: relative;
    margin: clamp(0px, 5.3333333333vw, 28px) 0;
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    gap: 1em;
    width: 100%;
    justify-content: center !important;
  }
  .sns-link-wrap p {
    display: none;
  }
  .sns-link-wrap .sns-link {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    --icon-size: clamp(0px, 6.9333333333vw, 36.4px);
    gap: 1em;
  }
  
    #global-navi #gnavi-inner-placeholder .secondary_menu .row #footer-site-logo {
  display: block;
  width: 100%;
  text-align: center;
      
}
  #global-navi #gnavi-inner-placeholder .secondary_menu .row #footer-site-logo img {
    margin-bottom: 5px
  }
  #global-navi #gnavi-inner-placeholder .secondary_menu .row #footer-site-logo i{
    color: #000;
  }
}

@media screen and (max-width: 767px) {
  address.sp {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    position: relative;
    z-index: 1;
    color: #000;
    text-align: center;
    margin-bottom: 36px;
  }
}

.btn-entry-wrap {
  width: clamp(0px, 32.6388888889vw, 658px);
  height: clamp(0px, 13.8888888889vw, 280px);
  --this-bg: var(--color-black-text);
  --this-brs: clamp(0px, 1.9444444444vw, 39.2px);
  --arrow-size: clamp(0px, 6.5972222222vw, 133px);
  --this-en-fz: clamp(0px, 5vw, 100.8px);
  --this-ja-fz: clamp(0px, 0.9722222222vw, 19.6px);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .btn-entry-wrap {
    height: clamp(0px, 29.6vw, 155.4px);
    --this-bg: #fff;
    --menu-color: var(--color-black-text);
    --this-brs: clamp(0px, 5.3333333333vw, 28px);
    --arrow-size: clamp(0px, 16vw, 84px);
    --this-en-fz: clamp(0px, 12vw, 63px);
    --this-ja-fz: clamp(0px, 2.4vw, 12.6px);
    --arrow-bg-color: var(--color-accent);
    --arrow-inner-color: #fff;
  }
}
.btn-entry-wrap .btn-entry {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--this-bg);
  border-radius: var(--this-brs);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.btn-entry-wrap .btn-entry:hover {
  --this-bg: #fff;
  --menu-color: var(--color-black-text);
  color: var(--color-black-text);
}
.btn-entry-wrap .btn-entry:hover .arrow {
  --arrow-bg-color:linear-gradient(90deg, rgba(65, 164, 253, 1), rgba(14, 244, 255, 1)) !important;
}
.btn-entry-wrap .btn-entry div {
  display: grid;
  grid-template-columns: auto auto;
  gap: clamp(0px, 1.5277777778vw, 30.8px);
  position: relative;
}
@media screen and (max-width: 767px) {
  .btn-entry-wrap .btn-entry div {
    gap: clamp(0px, 2.6666666667vw, 14px);
  }
}
.btn-entry-wrap .btn-entry div span {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--this-ja-fz) * 1.3);
}
@media screen and (max-width: 767px) {
  .btn-entry-wrap .btn-entry div span {
    gap: calc(var(--this-ja-fz) * 0.8);
    width: calc(127 * var(--rpxClamp));
  }
}
.btn-entry-wrap .btn-entry div .en {
  font-size: var(--this-en-fz);
  display: block;
  text-indent: -0.07em;
  line-height: 0.78;
  width: 100%;
  font-size: 38px;
  color: #000 !important;
}
.btn-entry-wrap .btn-entry div .ja {
  font-size: var(--this-ja-fz);
  display: block;
  white-space: nowrap;
  text-align-last: justify;
  width: 100%;
  font-size: 9px;
  color: #000 !important;
}

/*
@note 髢矩哩繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
*/
#global-navi {
  --translateX: translateX(0%);
  --translateX-menu: translateX(-50%);
  --easing: cubic-bezier(0.76, 0.04, 0.31);
  --transition: 500ms ease-in-out;
  --delay: 0ms;
  --opacity: 0;
  opacity: var(--opacity);
  transition: var(--transition);
}
@media screen and (max-width: 767px) {
  #global-navi {
    --transition: 600ms ease-in-out;
  }
}
.show-gnav #global-navi {
  --translateX: (0);
  --translateX-menu: 0;
  --opacity: 1;
}
#global-navi .bg {
  transform: var(--translateX);
  transition: var(--transition);
  opacity: var(--opacity);
}
@media screen and (max-width: 767px) {
  #global-navi .bg {
    height: 150vh;
  }
}

/* -----------------------------
@map 繝壹�繧ｸ繝輔ャ繧ｿ繝ｼ 
----------------------------- */
section#page-footer {
  height: var(--page-footer-height);
  background: #ccc;
  position: relative;
  display: grid;
  place-content: center;
}
section#page-footer .btn-entry-wrap {
  --this-bg: none;
}
section#page-footer a {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: grid;
  place-content: center;
}
section#page-footer .img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
section#page-footer .img:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  mix-blend-mode: multiply;
}
section#page-footer .img:after {
  content: "";
  transition: 300ms ease-in-out;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  ;
  mix-blend-mode: hard-light;
  transform: translateX(-100%);
  opacity: 0;
  background-image: linear-gradient(90deg, #ffe896, #fbc400);
}
section#page-footer .btn-entry-wrap {
  --this-en-fz:clamp(0px, 6.9444444444vw, 140px);
  --this-ja-fz: clamp(0px, 1.3888888889vw, 28px);
  --arrow-size: clamp(0px, 8.9583333333vw, 180.6px);
  --arrow-bg-color: var(--color-accent);
  --arrow-inner-color: #fff;
  transform: translateY(clamp(0px, 1.3888888889vw, 28px));
}
@media screen and (min-width: 768px) {
  section#page-footer .btn-entry-wrap .btn-entry {
    background: none;
  }
}
@media screen and (max-width: 767px) {
  section#page-footer .btn-entry-wrap {
    --arrow-bg-color: #fff;
    --arrow-inner-color: var(--color-black-text);
  }
  section#page-footer .btn-entry-wrap .btn-entry {
    --this-en-fz:clamp(0px, 13.8666666667vw, 72.8px);
    --this-ja-fz: clamp(0px, 2.9333333333vw, 15.4px);
    --arrow-size: clamp(0px, 14.4vw, 75.6px);
    background: none;
  }
  section#page-footer .btn-entry-wrap .btn-entry div {
    align-items: center;
  }
}
section#page-footer .btn-entry-wrap i {
  color: #fff;
}
@media screen and (min-width: 768px) {
  section#page-footer:hover .img:after {
    opacity: 1;
    transform: translateX(0);
  }
  section#page-footer:hover .btn-entry-wrap .arrow {
    --arrow-bg-color: #fff !important;
    --arrow-inner-color: var(--color-accent);
  }
}
section#page-footer:active .img:after {
  opacity: 1;
  transform: translateX(0);
}
section#page-footer:active .btn-entry-wrap .arrow {
  --arrow-bg-color: #fff !important;
  --arrow-inner-color: var(--color-accent);
}

/* -----------------------------
@map 繧ｵ繧､繝医ヵ繝�ち繝ｼ繝翫ン 
----------------------------- */
#recruit-footer-navi {
  background: #fff;
  padding: var(--footer-padding);
}
#recruit-footer-navi .inner {
  width: 100%;
}
@media screen and (min-width: 768px) {
  #recruit-footer-navi .inner {
    margin: 0 auto;
    width: clamp(0px, 83.3333333333vw, 1680px);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: clamp(0px, 2.4305555556vw, 49px);
  }
}
#recruit-footer-navi .inner > .row {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
}
#recruit-footer-navi .inner > .row > ._1,
#recruit-footer-navi .inner > .row > ._2 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    flex-direction: column-reverse;
  }
  #recruit-footer-navi .inner .row._2 .logo_wrap {
    padding: clamp(0px, 18.6666666667vw, 98px) 0 clamp(0px, 21.3333333333vw, 112px) 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0px, 4.8vw, 25.2px);
    width: 100%;
  }
  #recruit-footer-navi .inner .row._2 .logo_wrap #footer-site-logo {
    width: clamp(0px, 48vw, 252px);
    gap: clamp(0px, 1.8666666667vw, 9.8px);
  }
  #recruit-footer-navi .inner .row._2 .logo_wrap #footer-site-logo i {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
  }
  #recruit-footer-navi .inner .row._2 .logo_wrap .sns-link {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    --icon-size:clamp(0px, 8.5333333333vw, 44.8px);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: center;
    gap: 1em;
  }
  #recruit-footer-navi .inner .row._2 ._2 {
    display: none;
  }
}
#recruit-footer-navi .menu-list-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(0px, 3.4722222222vw, 70px);
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .menu-list-wrap {
    display: none;
  }
}
#recruit-footer-navi .menu-list-wrap ul {
  font-size: clamp(0px, 0.9722222222vw, 19.6px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
}
#recruit-footer-navi .menu-list-wrap ul .hd {
  margin-bottom: 0.5em;
}
#recruit-footer-navi .menu-list-wrap ul li {
  line-height: 1;
  width: 100%;
}
#recruit-footer-navi .menu-list-wrap ul .en {
  display: none;
}
#recruit-footer-navi .menu-list-wrap ul a {
  font-weight: 300;
  line-height: 1;
  display: block;
}
#recruit-footer-navi .ec-link-wrap {
  padding: clamp(0px, 2.7777777778vw, 56px) 0 clamp(0px, 2.4305555556vw, 49px) 0;
  background: var(--color-black-text);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #fff;
}
#recruit-footer-navi .ec-link-wrap .img {
  overflow: visible;
}
@media screen and (min-width: 768px) {
  #recruit-footer-navi .ec-link-wrap {
    border-radius: clamp(0px, 2.7777777778vw, 56px);
    width: clamp(0px, 26.875vw, 541.8px);
  }
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .ec-link-wrap {
    width: 100%;
    padding: 27px 0 30px 0;
  }
}
#recruit-footer-navi .ec-link-wrap * {
  color: #fff;
  font-weight: 300;
  text-align: center;
}
#recruit-footer-navi .ec-link-wrap p {
  width: 100%;
  font-size: clamp(0px, 0.9722222222vw, 19.6px);
  margin-bottom: 1em;
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .ec-link-wrap p {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
  }
}
#recruit-footer-navi .ec-link-wrap a {
  width: 50%;
  height: clamp(0px, 4.7222222222vw, 95.2px);
  border-right: 1px solid #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .ec-link-wrap a {
    height: clamp(0px, 15.7333333333vw, 82.6px);
  }
}
#recruit-footer-navi .ec-link-wrap a:last-of-type {
  border-right: none;
}
#recruit-footer-navi .ec-link-wrap a .img {
  height: clamp(0px, 1.875vw, 37.8px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: clamp(0px, 0.6944444444vw, 14px);
}
#recruit-footer-navi .ec-link-wrap a .img img {
  height: 100%;
  width: auto;
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .ec-link-wrap a .img {
    margin-bottom: clamp(0px, 1.0666666667vw, 5.6px);
    height: clamp(0px, 7.2vw, 37.8px);
  }
}
#recruit-footer-navi .ec-link-wrap a .img._2 img {
  max-height: 89%;
  width: auto;
}
#recruit-footer-navi .ec-link-wrap a i {
  width: 100%;
  display: block;
  font-size: clamp(0px, 0.8333333333vw, 16.8px);
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .ec-link-wrap a i {
    font-size: clamp(0px, 2.9333333333vw, 15.4px);
  }
}
#recruit-footer-navi #footer-site-logo {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: clamp(0px, 15.3472222222vw, 309.4px);
  gap: clamp(0px, 0.9027777778vw, 18.2px);
  margin-right: clamp(0px, 3.4722222222vw, 70px);
}
#recruit-footer-navi #footer-site-logo .logo {
  width: 100%;
}
#recruit-footer-navi #footer-site-logo .logo img {
  width: 100%;
  height: auto;
}
#recruit-footer-navi #footer-site-logo i {
  width: 100%;
  color: var(--color-black-text) !important;
  white-space: nowrap;
}
#recruit-footer-navi .sns-link {
  --this-color: var(--color-black-text);
  --icon-gap: clamp(0px, 1.1111111111vw, 22.4px);
  --icon-size:clamp(0px, 2.7777777778vw, 56px);
  flex-direction: row;
  width: auto;
}
#recruit-footer-navi .secondary_menu {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0px, 1.6666666667vw, 33.6px);
}
#recruit-footer-navi .secondary_menu .row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0px, 1.3888888889vw, 28px);
  align-items: center;
}
#recruit-footer-navi .secondary_menu .row a {
  font-size: clamp(0px, 0.8333333333vw, 16.8px);
}
#recruit-footer-navi .secondary_menu .row address {
  font-size: clamp(0px, 1.1111111111vw, 22.4px);
}


.kv-animation-elem {
  will-change: transform, animation, opacity;
}
.kv-animation-elem.kv-animation-end {
  will-change: auto;
}

/* -----------------------------
@map flip-card
----------------------------- */
.flip-card-grp._1 {
  -webkit-transform: translate3d(0, 0, 10px);
  transform: translate3d(0, 0, 10px);
}

.flip-card {
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: 1000ms ease-in-out;
  transition-delay: 200ms;
}
.flip-card._2 {
  transition-delay: 400ms;
}
.flip-card.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.flip-card.show.front {
  -webkit-transform: translate3d(0, 0, 5px);
  transform: translate3d(0, 0, 5px);
}

.card-person .img {
  -webkit-transform: translate3d(0, 0, 5px);
  transform: translate3d(0, 0, 5px);
}

/* -----------------------------
@map Lead text
----------------------------- */
#KV .lead-text {
  opacity: 0;
  transform: translate(-50px, 0px);
  transition-duration: 1500ms;
  transition-timing-function: cubic-bezier(0, 0, 0, 1);
  transition-delay: 1000ms;
}
#KV .lead-text.run {
  opacity: 1;
  transform: translate(0px, 0px) !important;
  will-change: transform, opacity;
}
#KV .lead-text._2 {
  transform: translate(-30px, 0px);
  transition-timing-function: ease-in-out;
  transition: 1000ms;
  transition-delay: 1500ms;
}

/* -----------------------------
@map SVG path
----------------------------- */
:root {
  --stroke-dasharray: 0;
  --stroke-dashoffset: 0;
}

/*
@note 繝ｩ繧､繝ｳ繝代せ
*/
.na {
  display: none;
}

.pen-animation {
  width: clamp(0px, 28.125vw, 567px);
  height: clamp(0px, 8.0555555556vw, 162.4px);
  --stroke-dasharray: 472px;
  --stroke-dashoffset: 472px;
}
.pen-animation.run {
  --stroke-dashoffset: 0px;
}

svg.line-path {
  width: 100%;
  height: auto;
}
svg.line-path image {
  width: 100%;
  height: 100%;
}
svg.line-path path {
  stroke-width: 4px;
  isolation: isolate;
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: var(--stroke-dashoffset);
  transition: 1000ms ease-in-out;
}

/*
@note 繝�く繧ｹ繝医ヱ繧ｹ
*/
.identity-txt {
  width: clamp(0px, 24.375vw, 491.4px);
  height: clamp(0px, 14.6527777778vw, 295.4px);
  overflow: visible;
  --stroke-dasharray: 1695px;
  --stroke-dashoffset: 1695px;
  -webkit-transform: translate3d(0, 0, 11px);
  transform: translate3d(0, 0, 11px);
}
.identity-txt.run {
  --stroke-dashoffset: 0px;
}
.identity-txt svg.text-path {
  width: 100%;
  height: auto;
}
.identity-txt svg.text-path image {
  width: 100%;
  height: 100%;
}
.identity-txt svg.text-path path {
  stroke-width: 12px;
  isolation: isolate;
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: var(--stroke-dashoffset);
  transition: 2000ms ease-in-out;
}

/*
@note = = KV縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
*/
@keyframes KV-flip-card-1 {
  0% {
    transform: rotateY(1deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@keyframes KV-flip-card-2 {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
:root {
  --kv-flip-duration:1000ms;
  --kv-flip-dellay:0ms;
  --iteration: 1;
}

.flip-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  --kv-flip-animation: KV-flip-card-1 var(--kv-flip-duration) var(--kv-flip-dellay) ease-in both var(--iteration);
}
.flip-card._2 {
  --kv-flip-dellay:300ms;
  --kv-flip-animation: KV-flip-card-1 var(--kv-flip-duration) var(--kv-flip-dellay) ease-in both var(--iteration);
}
.flip-card.moveout {
  --kv-flip-animation: KV-flip-card-2 var(--kv-flip-duration) var(--kv-flip-dellay) ease-out both var(--iteration);
  --kv-flip-dellay:0ms !important;
}
.flip-card.moveout .kv-animation-elem {
  animation-delay: 0ms !important;
}

.card-person {
  animation: var(--kv-flip-animation);
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  animation-play-state: paused;
}
.card-person img {
  transform: translate3d(0, 0, 1px);
}
.card-person img {
  backface-visibility: hidden !important;
}
.card-person.moveout {
  animation: var(--kv-flip-animation-2);
  backface-visibility: hidden !important;
}
.run .card-person {
  animation-play-state: running;
  will-change: transform, animation, opacity;
}
.card-person ._2 {
  display: none;
}
.card-person[data-count="2"] ._1, .card-person[data-count="3"] ._1 {
  display: none;
}
.card-person[data-count="2"] ._2, .card-person[data-count="3"] ._2 {
  display: block;
}
.card-person .back {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.card-bg {
  animation: var(--kv-flip-animation);
  animation-play-state: paused;
  transform-style: preserve-3d;
  overflow: visible;
}
.card-bg.cover {
  z-index: 3 !important;
}
.card-bg .perspective {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotateY(90deg);
}
.card-bg.moveout {
  animation: var(--kv-flip-animation-2);
}
.run .card-bg {
  animation-play-state: running;
}

/* -----------------------------
@map 繝医ャ繝励�繝ｼ繧ｸ
----------------------------- */
/*
@note 繝｡繧､繝ｳ繝薙ず繝･繧｢繝ｫ
*/
section#KV {
  height: 100vh;
  padding-top: var(--header-total-height);
  /* @note - - 繧ｭ繝｣繝�メ繝輔Ξ繝ｼ繧ｺ */
  /*
  @note - - 莠ｺ迚ｩ縺ｮ繧ｫ繝ｼ繝�
  */
  /*
  @note - - 繝壹Φ縺ｮ邱�
  */
  /*
  @note - - Identity
  */
  background: #FEE603;
}
@media screen and (max-width: 767px) {
  section#KV {
    padding-top: 0;
	height:96vh;
  }
}
section#KV > .inner {
  width: var(--max-width);
  position: relative;
  height: 100%;
  margin: 0 auto;
}
section#KV .catch {
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  section#KV .catch {
    height: auto;
    margin: 0 clamp(0px, 5.3333333333vw, 28px);
    padding-top: clamp(0px, 25.0666666667vw, 131.6px);
  }
}
section#KV .catch .inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  section#KV .catch .inner {
    transform: translate(0, -14%);
  }
}
section#KV .catch p {
  font-weight: 500;
  width: 100%;
  letter-spacing: -0.01em;
}
@media screen and (max-width: 767px) {
  section#KV .catch p {
    font-size: clamp(0px, 67.467vw, 20.2px);
    line-height: 1.8462;
  }
}
section#KV .catch ._1 {
  font-size: clamp(0px, 3.6944444444vw, 114.8px);
  line-height: 1.24em;
  margin-bottom: clamp(0px, 0.8333333333vw, 16.8px);
}
@media screen and (max-width: 767px) {
  section#KV .catch ._1 {
    font-size: 28px;
    margin-bottom: clamp(0px, 100.4vw, 500.6px);
    line-height: 1.5;
    height: clamp(0px, 42.6666666667vw, 224px);
    font-weight: bold;
  }
}
section#KV .catch ._1 i {
  color: #2D8E3B;
  font-weight: bold;
}
section#KV .flip-card-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  section#KV .flip-card-wrap {
    margin-left: clamp(0px, 20.625vw, 415.8px);
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap {
    justify-content: space-between;
    align-items: flex-start;
  }
}
section#KV .flip-card-wrap .flip-card-grp {
  min-width: clamp(0px, 26.3888888889vw, 532px);
  height: clamp(0px, 38.8888888889vw, 784px);
  background-size: cover;
  position: relative;
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap .flip-card-grp {
    width: clamp(0px, 49.6vw, 260.4px);
    height: clamp(0px, 73.3333333333vw, 385px);
  }
}
section#KV .flip-card-wrap .flip-card-grp .flip-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
section#KV .flip-card-wrap .flip-card-grp .flip-card.front {
  z-index: 1;
}
section#KV .flip-card-wrap .flip-card-grp .flip-card.back {
  z-index: 0;
}
section#KV .flip-card-wrap .flip-card-grp .card-person {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
section#KV .flip-card-wrap .flip-card-grp .card-bg {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1 !important;
}
section#KV .flip-card-wrap .flip-card-grp .img {
  position: absolute;
}
section#KV .flip-card-wrap .flip-card-grp._1 {
  z-index: 2;
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap .flip-card-grp._1 {
    position: relative;
    left: clamp(0px, 5.3333333333vw, 28px);
    top: 0;
    margin-top: clamp(0px, 73.8666666667vw, 387.8px);
  }
}
section#KV .flip-card-wrap .flip-card-grp._1 .img {
  width: 115%;
}
section#KV .flip-card-wrap .flip-card-grp._1 ._1 {
  bottom: 0;
  left: 0;
  z-index: 2;
}
section#KV .flip-card-wrap .flip-card-grp._1 ._2 {
  bottom: 0;
  left: 0;
  z-index: 1;
}
section#KV .flip-card-wrap .flip-card-grp._2 {
  z-index: 1;
}
@media screen and (min-width: 768px) {
  section#KV .flip-card-wrap .flip-card-grp._2 {
    left: clamp(-51.8px, -2.5694444444vw, 0px);
    top: clamp(-72.8px, -3.6111111111vw, 0px);
  }
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap .flip-card-grp._2 {
    position: relative;
    right: clamp(0px, 5.3333333333vw, 28px);
    top: 0;
    margin-top: clamp(0px, 60.0666666667vw, 215.6px);
  }
}
section#KV .flip-card-wrap .flip-card-grp._2 .img {
  width: 113%;
}
section#KV .flip-card-wrap .flip-card-grp._2 .img._1 {
  bottom: clamp(0px, 1.3888888889vw, 28px);
  left: clamp(-102.2px, -5.0694444444vw, 0px);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap .flip-card-grp._2 .img._1 {
    bottom: clamp(0px, 2.6666666667vw, 14px);
  }
}
section#KV .flip-card-wrap .flip-card-grp._2 .img._2 {
  bottom: clamp(0px, 1.3888888889vw, 28px);
  left: clamp(-91px, -4.5138888889vw, 0px);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap .flip-card-grp._2 .img._2 {
    bottom: clamp(0px, 2.6666666667vw, 14px);
  }
}
section#KV .pen-animation {
  position: absolute;
  top: clamp(0px, 0.9722222222vw, 19.6px);
  left: clamp(-75.6px, -3.75vw, 0px);
  transform: translate(0, -100%) rotate(-1deg);
}
@media screen and (max-width: 767px) {
  section#KV .pen-animation {
    width: clamp(0px, 49.6vw, 260.4px);
    height: auto;
    left: clamp(-14px, -2.6666666667vw, 0px);
    top: clamp(0px, 2.1333333333vw, 11.2px);
  }
}
section#KV .pen-animation .img {
  width: clamp(0px, 28.0555555556vw, 565.6px);
}
section#KV .identity-txt {
  width: clamp(0px, 24.375vw, 491.4px);
  position: absolute;
  transform-origin: left top;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  section#KV .identity-txt {
    left: clamp(0px, 33.2638888889vw, 670.6px);
    top: calc(50% - clamp(0px, 0.8333333333vw, 16.8px));
  }
}
@media screen and (max-width: 767px) {
  section#KV .identity-txt {
    width: clamp(0px, 54.9333333333vw, 288.4px);
    height: auto;
    left: clamp(0px, 30.9333333333vw, 162.4px);
    bottom: clamp(0px, 2.6666666667vw, 14px);
  }
}
section#KV .identity-txt img {
  width: 100%;
  height: auto !important;
}

.scroll-anchor-wrap {
  position: absolute;
  top: 50%;
  left: clamp(0px, 8.3333333333vw, 168px);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(0px, 0.4861111111vw, 9.8px);
  transform-origin: left bottom;
  transform: rotate(90deg) translateX(clamp(0px, 0.8333333333vw, 16.8px));
}
@media screen and (max-width: 767px) {
  .scroll-anchor-wrap {
    gap: clamp(0px, 1.3333333333vw, 7px);
    top: clamp(0px, 136.2666666667vw, 715.4px);
    left: auto;
    right: clamp(-113.4px, -21.6vw, 0px);
  }
}
.scroll-anchor-wrap .en {
  font-size: clamp(0px, 0.9722222222vw, 19.6px);
}
@media screen and (max-width: 767px) {
  .scroll-anchor-wrap .en {
    font-size: clamp(0px, 2.9333333333vw, 15.4px);
  }
}
.scroll-anchor-wrap .bar-wrap {
  height: clamp(0px, 0.4861111111vw, 9.8px);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  .scroll-anchor-wrap .bar-wrap {
    height: clamp(0px, 1.3333333333vw, 7px);
  }
}
.scroll-anchor-wrap .bar {
  width: clamp(0px, 7.3611111111vw, 148.4px);
  height: 1px;
  background-color: var(--color-black-text);
  position: relative;
}
@media screen and (max-width: 767px) {
  .scroll-anchor-wrap .bar {
    width: clamp(0px, 21.6vw, 113.4px);
  }
}
.scroll-anchor-wrap .dot {
  width: clamp(0px, 0.4861111111vw, 9.8px);
  height: clamp(0px, 0.4861111111vw, 9.8px);
  background: var(--color-black-text);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .scroll-anchor-wrap .dot {
    width: clamp(0px, 1.3333333333vw, 7px);
    height: clamp(0px, 1.3333333333vw, 7px);
  }
}
.scroll-anchor-wrap.inview-10 .dot {
  animation: scroll-anchor 2s ease-in-out infinite;
  will-change: left;
}

:root {
  --this-color: var(--color-black-text);
  --icon-size: clamp(0px, 1.8055555556vw, 36.4px);
  --icon-gap: clamp(0px, 0.9027777778vw, 18.2px);
}

.sns-link-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .sns-link-wrap {
    position: absolute;
    z-index: 1;
    right: clamp(0px, 8.3333333333vw, 168px);
    bottom: clamp(0px, 5.0694444444vw, 102.2px);
    gap: clamp(0px, 0.9027777778vw, 18.2px);
    color: #000;
  }
}
@media screen and (max-width: 767px) {
  #KV .sns-link-wrap {
    justify-content: flex-end !important;
    padding: 0;
    padding-right: clamp(0px, 12vw, 63px);
    position: absolute;
    top: clamp(0px, 139.7333333333vw, 733.6px);
    z-index: 4;
    margin-top: 0;
  }
  #KV .sns-link-wrap p {
    display: none;
  }
}
.sns-link-wrap p i {
  white-space: nowrap;
  font-size: 1.2rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  letter-spacing: 0.05em;
  color: var(--this-color);
  letter-spacing: 0.05;
}
@media screen and (max-width: 767px) {
  .sns-link-wrap p i {
    gap: clamp(0px, 1.6vw, 8.4px);
  }
}
@media screen and (min-width: 768px) {
  .sns-link-wrap p i {
    font-size: 1.4rem;
    width: clamp(0px, 7.0833333333vw, 142.8px);
    height: clamp(0px, 1.3888888889vw, 28px);
    transform-origin: center center;
    color: #000;
  }
}
.sns-link-wrap p i:after {
  content: "";
  width: clamp(0px, 1.9444444444vw, 39.2px);
  height: 1px;
  background: #000;
  color: #000;
}
@media screen and (max-width: 767px) {
  .sns-link-wrap p i:after {
    width: 30px;
  }
}

@media screen and (min-width: 768px) {
  .sns-link {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--icon-gap);
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  #KV .sns-link {
    --icon-size: clamp(0px, 6.9333333333vw, 36.4px);
    --icon-gap: clamp(0px, 3.4666666667vw, 18.2px);
  }
}
.sns-link li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}
.sns-link li i {
  font-size: var(--icon-size);
  line-height: 1;
  color: #000;
}

/*
@note 隕句�縺�
*/
.top-section-title {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}


h2.top-section-title{
  /*! font-weight: bolder; */
  font-size: clamp(0px, 4.8vw, 25.2px);
}


.top-section-title .en {
  font-size: 20px;
  line-height: 1.2;
  color: #2D8E3B;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(5 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .top-section-title .en {
    font-size: clamp(0px, 4.2666666667vw, 22.4px);
  }
}
.top-section-title .en i {
  font-weight: bold;
}
.top-section-title .en:before {
  content: "";
  width: 0.65em;
  height: 1px;
  background:#2D8E3B;
}
.top-section-title .ja {
  font-size: 48px;
  line-height: 1.458;
  font-weight: bolder !important;
}
@media screen and (max-width: 767px) {
  .top-section-title .ja {
    font-size: clamp(0px, 7.467vw, 32.2px);
  }
}

/*
@note 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ
*/
.top-sec {
  position: relative;
}
.top-sec > .inner {
  width: var(--max-width);
  margin: 0 auto;
}
.top-sec hgroup + .lead {
  margin-top: 1em;
}
@media screen and (max-width: 767px) {
  .top-sec hgroup + .lead {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    margin-top: clamp(0px, 2.6666666667vw, 14px);
  }
}
.top-sec .card-list {
  margin-top: clamp(0px, 4.1666666667vw, 84px);
  --arrow-bg-color: var(--color-accent);
  --arrow-inner-color: #fff;
}
@media screen and (max-width: 767px) {
  .top-sec .card-list {
    margin-top: clamp(0px, 8vw, 42px);
  }
}
.top-sec .card-list i.arrow {
  border: none;
}
a:hover .top-sec .card-list i.arrow, .top-sec .card-list i.arrow:hover {
  --arrow-inner-color: var(--color-accent);
}

/*
@note 縺雁ｮ｢讒倥�~~ #lead
*/
.top-sec#lead {
  padding-top: clamp(0px, 7.1527777778vw, 144.2px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead {
    padding-top: clamp(0px, 10.1333333333vw, 53.2px);
  }
}
.top-sec#lead:after {
  content: "";
  width: 100%;
  height: clamp(0px, 175.625vw, 3540.6px);
  position: absolute;
  left: 0;
  top: clamp(-280px, -13.8888888889vw, 0px);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: -1;
  background: #FBC400;
}
@media screen and (max-width: 767px) {
  .top-sec#lead:after {
    height: clamp(0px, 232.133vw, 1541.2px);
  }
}
@media screen and (max-width: 767px) {
  .top-sec#lead:after {
    top: 0px;
  }
}
.top-sec#lead > .inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .top-sec#lead > .inner {
    height: clamp(0px, 70.4861111111vw, 1421px);
    margin-bottom: clamp(0px, 7.7777777778vw, 156.8px);
  }
}
@media screen and (max-width: 767px) {
  .top-sec#lead > .inner {
    display: flex;
    flex-wrap: wrap;
  }
}
.top-sec#lead .lead-text {
  padding-top: clamp(0px, 7.0833333333vw, 142.8px);
  width: clamp(0px, 36.1111111111vw, 728px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .lead-text {
    order: 2;
    width: 100%;
    padding: 54px 20px 74px 20px;
    text-align: right;
    color: #262727;
    font-weight: bold;
  }
  .top-sec#lead .lead-text p {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    margin-top: -0.25em;
    margin-bottom: -0.25em;
    font-weight: bold;
  }
}
.top-sec#lead .lead-text h2 {
  font-size: clamp(0px, 2.2222222222vw, 44.8px);
  margin-bottom: clamp(0px, 2.0833333333vw, 42px);
  line-height: 1.6875;
  font-weight: bold;
  text-align-last: left;
}
@media screen and (max-width: 767px) {
  .top-sec#lead .lead-text h2 {
    font-size: clamp(0px, 5.9333333333vw, 36.4px);
    line-height: 1.6154;
    margin-bottom: 20px;
  }
}
.top-sec#lead .lead-text .btn-link {
  margin-top: clamp(0px, 4.1666666667vw, 84px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .lead-text .btn-link {
    margin-left: auto;
    margin-top: clamp(0px, 8vw, 42px);
    font-size: clamp(0px, 4.2666666667vw, 22.4px);
    --arrow-bg-color: var(--color-black-text);
    --arrow-inner-color: ;
  }
}
.top-sec#lead .img-grp {
  line-height: 1;
  font-size: 0;
  order: 1;
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp {
    height: 367px;
    width: 100%;
    position: relative;
  }
}
.top-sec#lead .img-grp .img {
  position: absolute;
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}
.top-sec#lead .img-grp .a {
  top: 0;
  right: clamp(0px, 4.0277777778vw, 81.2px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .a {
    width: clamp(0px, 31.2vw, 163.8px);
    height: clamp(0px, 31.2vw, 163.8px);
    right: clamp(0px, 15.4666666667vw, 81.2px);
  }
}
.top-sec#lead .img-grp .b {
  top: clamp(0px, 24.1666666667vw, 487.2px);
  right: clamp(0px, 11.6666666667vw, 235.2px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .b {
    width: clamp(0px, 25.3333333333vw, 133px);
    height: clamp(0px, 25.3333333333vw, 133px);
    right: clamp(0px, 52vw, 273px);
    top: clamp(0px, 20.2666666667vw, 106.4px);
  }
}
.top-sec#lead .img-grp .c {
  bottom: clamp(0px, 3.2638888889vw, 65.8px);
  left: 0;
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .c {
    bottom: 0;
    left: 0;
    width: clamp(0px, 36.5333333333vw, 191.8px);
    height: clamp(0px, 44vw, 231px);
  }
}
.top-sec#lead .img-grp .d {
  bottom: clamp(0px, 0vw, 0px);
  right: clamp(0px, 16.5277777778vw, 333.2px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .d {
    width: clamp(0px, 25.6vw, 134.4px);
    height: clamp(0px, 25.6vw, 134.4px);
    bottom: clamp(0px, 15.7333333333vw, 82.6px);
    right: clamp(0px, 32.5333333333vw, 170.8px);
  }
}
.top-sec#lead .img-grp .e {
  bottom: clamp(0px, 17.1527777778vw, 345.8px);
  right: clamp(-133px, -6.5972222222vw, 0px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .e {
    width: clamp(0px, 27.7333333333vw, 145.6px);
    height: clamp(0px, 27.4666666667vw, 144.2px);
    right: 0;
    bottom: clamp(0px, 33.8666666667vw, 177.8px);
  }
}
.top-sec#lead .movie-wrap {
  position: relative;
  height: clamp(0px, 45.1388888889vw, 910px);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .top-sec#lead .movie-wrap {
    height: clamp(0px, 75.7333333333vw, 397.6px);
  }
  .top-sec#lead .movie-wrap .js-slick-container {
    height: 100%;
  }
  .top-sec#lead .movie-wrap .js-slick-container .item {
    height: clamp(0px, 75.7333333333vw, 397.6px);
  }
  .top-sec#lead .movie-wrap .js-slick-container .item .img {
    height: 100%;
  }
}
.top-sec#lead .movie-wrap .movie-wrap-bg {
  position: relative;
}
.top-sec#lead .movie-wrap .movie-wrap-bg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: var(--color-black-text);
  opacity: 0.4;
  pointer-events: none;
}
.top-sec#lead .movie-wrap .movie-wrap-bg .item {
  overflow: hidden;
}
.top-sec#lead .movie-wrap .movie-wrap-bg .item img {
  transform: scale(1);
  transition: 20000ms;
  transition-delay: 500ms;
}
.top-sec#lead .movie-wrap .movie-wrap-bg .slick-current:not(.rdy) img {
  transform: scale(1.2);
  transition-delay: 0ms;
}
.top-sec#lead .movie-wrap a.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.top-sec#lead .movie-wrap:hover .play-btn .rotate {
  transform: scale(1.1);
}
.top-sec#lead .movie-wrap .play-btn {
  width: clamp(0px, 13.75vw, 277.2px);
  height: clamp(0px, 13.75vw, 277.2px);
  position: absolute;
  z-index: 2;
  bottom: calc(80 * var(--rpxClamp));
  right: calc(120 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .top-sec#lead .movie-wrap .play-btn {
    width: clamp(0px, 24vw, 126px);
    height: clamp(0px, 24vw, 126px);
    right: calc(12 * var(--rpxClamp));
    bottom: calc(17 * var(--rpxClamp));
  }
}
.top-sec#lead .movie-wrap .play-btn div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
}
.top-sec#lead .movie-wrap .play-btn .play {
  z-index: 1;
  pointer-events: none;
  background-image: url(../img/top/lead/play-icon@3x.png);
}
.top-sec#lead .movie-wrap .play-btn .rotate {
  z-index: 0;
  transition: 300ms cubic-bezier(0.59, -0.87, 0.45, 2.62);
}
.top-sec#lead .movie-wrap .play-btn .rotate:hover {
  transform: scale(1.1);
}
.top-sec#lead .movie-wrap .play-btn .rotate .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: cover;
  background-image: url(../img/top/lead/circle-elem@3x.png);
  animation: rotate-playbutton 30s linear infinite;
  animation-play-state: paused;
}
.top-sec#lead .movie-wrap .play-btn .rotate .inner.inview-0 {
  animation-play-state: running;
}
.top-sec#lead .movie-wrap hgroup {
  position: absolute;
  top: calc(100 * var(--rpxClamp));
  left: calc(220 * var(--rpxClamp));
  z-index: 2;
  color: #fff;
}
.top-sec#lead .movie-wrap hgroup .lead {
  margin-top: calc(14 * var(--rpxClamp));
  font-size: calc(16 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .top-sec#lead .movie-wrap hgroup {
    top: calc(43 * var(--rpxClamp));
    left: calc(20 * var(--rpxClamp));
  }
  .top-sec#lead .movie-wrap hgroup .lead {
    font-size: calc(13 * var(--rpxClamp));
  }
}
.top-sec#lead .markie {
  margin-top: clamp(0px, 8.0555555556vw, 162.4px);
  height: clamp(0px, 13.8888888889vw, 280px);
  background-image: url(../img/top/lead/markie-txt-bg@3x.png);
  background-size: cover;
  animation: page-footer-slide-markie 100s linear 0s infinite normal;
  
}
@media screen and (max-width: 767px) {
  .top-sec#lead .markie {
    height: clamp(0px, 20.8vw, 109.2px);
    margin-top: clamp(0px, 10.6666666667vw, 56px);
  }
}
.top-sec#lead .markie.inview-0 {
  animation-play-state: running;
  will-change: background-position;
}

/*
@note 莉穂ｺ九ｒ遏･繧� #work 
*/
.top-sec#work {
  padding-top: clamp(0px, 5.1388888889vw, 103.6px);
  padding-bottom: clamp(0px, 12.3611111111vw, 249.2px);

  background-image: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 8px, transparent 8px, transparent 16px ), linear-gradient(135deg, #FFE896 0%, #FBC400 100%);
}
@media screen and (max-width: 767px) {
  .top-sec#work {
    padding: clamp(0px, 13.3333333333vw, 70px) clamp(0px, 5.3333333333vw, 28px);
    padding-bottom: 0;
  }
}
.top-sec#work .card-list {
  gap: clamp(0px, 8vw, 42px);
}
@media screen and (min-width: 768px) {
  .top-sec#work .card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0px, 1.3888888889vw, 28px);
  }
}
@media screen and (min-width: 768px) {
  .top-sec#work .card-list hgroup {
    padding-right: clamp(0px, 1.875vw, 37.8px);
  }
}
@media screen and (max-width: 767px) {
  .top-sec#work .card-list .img {
    height: 168px;
  }
}

/*
@note 莉ｲ髢薙ｒ遏･繧� #people 
*/
@media screen and (max-width: 767px) {
  #page-people {
    overflow: hidden;
  }
}

.top-sec#people {
  padding-bottom: clamp(0px, 12.5vw, 252px);
  position: relative;
  padding-top: clamp(0px, 5.1388888889vw, 103.6px);
}
@media screen and (max-width: 767px) {
  .top-sec#people {
    padding: clamp(0px, 17.3333333333vw, 91px) clamp(0px, 5.3333333333vw, 28px) clamp(0px, 17.3333333333vw, 91px) clamp(0px, 5.3333333333vw, 28px);
  }
  .top-sec#people .lead br {
    display: none;
  }
}
.top-sec#people:after {
  content: "";
  width: 100%;
  height: clamp(0px, 123.625vw, 3540.6px);
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url(../img/global/dot-bg-03@2x.jpg);
  background-repeat: no-repeat;
  z-index: -1;
  background-position: top center;
}
@media screen and (max-width: 767px) {
  .top-sec#people:after {
    height: clamp(0px, 243.4vw, 3540.6px);
    background-image: url(../img/global/dot-bg-03-sp@2x.jpg);
    background-size: cover;
    background-position: top center;
  }
}
.top-sec#people .inner {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .top-sec#people .interview-list > p {
    font-size: clamp(0px, 19.2vw, 100.8px);
    line-height: clamp(0px, 23.4666666667vw, 123.2px);
  }
}
.top-sec#people .card-list {
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(0px, 0.4861111111vw, 9.8px);
  gap: clamp(0px, 1.3888888889vw, 28px);
  counter-reset: number 0;
  --arrow-bg-color: #fff;
  --arrow-inner-color: var(--color-accent);
  position: relative;
}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list {
    width: 100vw;
    margin-left: clamp(-28px, -5.3333333333vw, 0px);
    overflow-x: auto;
    padding: 0 clamp(0px, 5.3333333333vw, 28px) clamp(0px, 8vw, 42px) clamp(0px, 5.3333333333vw, 28px);
    gap: clamp(0px, 4vw, 21px);
    margin-top: clamp(-35px, -6.6666666667vw, 0px);
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;
    -ms-overflow-style: none;
  }
  .top-sec#people .card-list::-webkit-scrollbar {
    display: none;
  }
  .top-sec#people .card-list li {
    scroll-snap-align: center;
    position: relative;
  }
  .top-sec#people .card-list li h3 {
    font-size: 24px;
  }
  .top-sec#people .card-list li h3 .en {
    font-weight: 600;
  }
  .top-sec#people .card-list li .btn-link {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .top-sec#people .card-list li:nth-of-type(2) {
    transform: translateY(clamp(-84px, -4.1666666667vw, 0px));
  }
  .top-sec#people .card-list li:nth-of-type(3) {
    transform: translateY(clamp(-168px, -8.3333333333vw, 0px));
  }
}
.top-sec#people .card-list .img {
  position: relative;
  height: clamp(0px, 32.6388888889vw, 658px);
}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list .img {
    width: 272px;
    height: 399px;
  }
}
.top-sec#people .card-list .img img {
  position: absolute;
  top: 0;
  left: 0;
}
.top-sec#people .card-list .img img.base {
  transform: scale(1) !important;
}
.top-sec#people .card-list .img img.hover {
  opacity: 0;
  transition-delay: 500ms;
}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list .img img.hover {
    transition-delay: 0ms;
  }
}
@media screen and (min-width: 768px) {
  .top-sec#people .card-list .img:hover .hover {
    will-change: transform, opacity;
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list .img .interview-index {
    width: 52px;
    top: 20px;
    right: 17px;
    color: #e8e8e8;
    mix-blend-mode: multiply;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}
.top-sec#people .card-list .img .name {
  color: #fff;
  font-size: clamp(0px, 2.9166666667vw, 58.8px);
  position: absolute;
  z-index: 2;
  bottom: clamp(0px, 1.3888888889vw, 28px);
  left: clamp(0px, 0.625vw, 12.6px);
  line-height: 1.2143;
  transform-origin: left bottom;
  transform: rotate(-90deg) translateY(100%);
}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list .img .name {
    font-size: clamp(0px, 11.2vw, 58.8px);
    left: clamp(0px, 2.1333333333vw, 11.2px);
    bottom: clamp(0px, 4.8vw, 25.2px);
  }
}
.top-sec#people .flx {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-end;
  --arrow-bg-color: var(--color-black-text);
  --arrow-inner-color: var(--color-accent);
}
.top-sec#people .flx b {
  font-weight: bold;
}
.top-sec#people .flx a.btn-link:hover i {
  --arrow-inner-color: var(--color-accent) !important;
}

/*
@note 迺ｰ蠅�ｒ遏･繧� #environment 
*/
.top-sec#environment {
  padding-top: clamp(0px, 8.0555555556vw, 162.4px);
  padding-bottom: clamp(0px, 10.8333333333vw, 218.4px);
}
@media screen and (max-width: 767px) {
  .top-sec#environment {
    padding: clamp(0px, 18.6666666667vw, 98px) clamp(0px, 5.3333333333vw, 28px);
  }
}
.top-sec#environment .card-list {
  gap: clamp(0px, 2.0833333333vw, 42px);
}
@media screen and (max-width: 767px) {
  .top-sec#environment .card-list {
    gap: clamp(0px, 11.7333333333vw, 61.6px);
  }
  .top-sec#environment .card-list .btn-link {
    display: none;
  }
}

/* -----------------------------
@map 莠碁嚴螻､莉･髯�
----------------------------- */
.secondary-page {
  /*
  @note 繝壹�繧ｸ繝倥ャ繝€繝ｼ
  */
}
.secondary-page .secondary-page-title-header {
  position: relative;
  height: clamp(0px, 31.5972222222vw, 637px);
  background: #ccc;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .secondary-page .secondary-page-title-header {
    height: clamp(0px, 65.0666666667vw, 341.6px);
  }
}
.secondary-page .secondary-page-title-header h1 {
  --header-color: #fff;
  width: var(--max-width);
  margin: auto;
  margin-bottom: clamp(0px, 9.0277777778vw, 182px);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .secondary-page .secondary-page-title-header h1 {
    margin-left: clamp(0px, 5.3333333333vw, 28px);
    margin-bottom: clamp(0px, 13.3333333333vw, 70px);
  }
}
.secondary-page .secondary-page-title-header .img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.secondary-page .secondary-page-title-header .img:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.25);
  mix-blend-mode: multiply;
}

/*
@note 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ
*/
section[class^=sec-] {
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
}
section[class^=sec-] > .inner {
  width: var(--max-width);
  margin: 0 auto;
}
section[class^=sec-] p.lead {
  margin: clamp(0px, 2.2916666667vw, 46.2px) 0 clamp(0px, 4.0277777778vw, 81.2px) 0;
  line-height: 1.8;
  text-align: center;
  font-weight: 300;
}
@media screen and (max-width: 767px) {
  section[class^=sec-] p.lead {
    margin: calc(20 * var(--rpxClamp)) 0;
    text-align: justify;
  }
}

.bg-noise {
  background-image: url(../img/global/dot-bg-03@2x.jpg);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .bg-noise {
    background-image: url(../img/global/dot-bg-03-sp@2x.jpg);
  }
}

/* -----------------------------
@map About 莨夂､ｾ繧堤衍繧�
----------------------------- */
.sec-philosophy {
  --section-padding-top:clamp(0px, 10.9027777778vw, 219.8px);
  --section-padding-bottom:clamp(0px, 9.5833333333vw, 193.2px);
}
@media screen and (max-width: 767px) {
  .sec-philosophy {
    --section-padding-top:clamp(0px, 13.3333333333vw, 70px);
    --section-padding-bottom:clamp(0px, 13.3333333333vw, 70px);
  }
}

.grid-wrap {
  display: grid;
  grid-template-columns: clamp(0px, 31.7361111111vw, 639.8px) 1fr;
  align-items: flex-start;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .grid-wrap {
    padding: 0 clamp(0px, 5.3333333333vw, 28px);
    display: block;
  }
}
.grid-wrap .txt {
  padding-top: clamp(0px, 3.125vw, 63px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 35px;
}
@media screen and (max-width: 767px) {
  .grid-wrap .txt {
    gap: clamp(0px, 4.2666666667vw, 22.4px);
    padding-top: clamp(0px, 5.3333333333vw, 28px);
  }
}
.grid-wrap .txt * {
  width: 100%;
}
.grid-wrap .txt h3 {
  font-size: clamp(0px, 2.2222222222vw, 44.8px);
  line-height: 1.6875;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .grid-wrap .txt h3 {
    font-size: clamp(0px, 5.3333333333vw, 28px);
  }
}
.grid-wrap .txt p {
  font-weight: 300;
  line-height: 1.8;
  margin-top: -0.4em;
  margin-bottom: -0.4em;
}

@media screen and (min-width: 768px) {
  .sec-9action {
    --section-padding-top:calc(0 * var(--rpxClamp));
    --section-padding-bottom:calc(0 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .sec-9action {
    padding: 0 20px;
    --section-padding-top:calc(0 * var(--rpxClamp));
    --section-padding-bottom:calc(0 * var(--rpxClamp));
  }
}
.sec-9action .inner {
  border-top: 1px solid var(--color-gray-hairline);
  padding-top: clamp(0px, 7.7083333333vw, 155.4px);
  position: relative;
}
@media screen and (min-width: 768px) {
  .sec-9action .inner {
    display: block;
    padding-left: calc(457 * var(--rpxClamp));
  }
  .sec-9action .inner h2 {
    position: absolute;
    top: calc(111 * var(--rpxClamp));
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .sec-9action .inner {
    padding: 0;
    padding-top: 40px;
  }
}
.sec-9action:before {
  content: "";
  width: 1000px;
  border-top: 1px solid var(--color-gray-hairline);
}
.sec-9action ol {
  counter-reset: number;
  font-size: 24px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 56px;
  margin-bottom: clamp(0px, 11.1111111111vw, 224px);
}
@media screen and (max-width: 767px) {
  .sec-9action ol {
    font-size: clamp(0px, 3.7333333333vw, 19.6px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 2em;
    margin-top: clamp(0px, 2.6666666667vw, 14px);
    width: auto !important;
    margin-bottom: clamp(0px, 21.3333333333vw, 112px);
  }
}
.sec-9action ol li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  opacity: 0;
  transition: 500ms ease-in-out;
  transform: translate(20px, 0);
}
.sec-9action ol li.inview-50 {
  opacity: 1;
  transform: translate(0px, 0);
}
@media screen and (min-width: 768px) {
  .sec-9action ol li {
    gap: 38px;
    height: 50px;
  }
}
@media screen and (max-width: 767px) {
  .sec-9action ol li {
    font-size: clamp(0px, 3.7333333333vw, 19.6px);
    gap: clamp(0px, 5.0666666667vw, 26.6px);
  }
}
.sec-9action ol li:before {
  counter-increment: number 1;
  content: counter(number, decimal-leading-zero);
  font-size: 40px;
  font-family: var(--font-en);
  font-weight: bold;
  color: var(--color-accent);
}
@media screen and (max-width: 767px) {
  .sec-9action ol li:before {
    font-size: clamp(0px, 5.3333333333vw, 28px);
  }
}

/*
@note - - observe蟇ｾ雎｡
*/
@media screen and (min-width: 768px) {
  .sec-9action h2 {
    position: relative;
  }
  :has(.start-anchor.inview-0) .sec-9action h2 {
    position: fixed;
    top: 50vh;
    left: 50%;
    transform: translateY(calc(-34 * var(--rpxClamp)));
    margin-left: calc(var(--max-width) * -0.5);
  }
  :has(.markie-img-list.inview-0) .sec-9action h2 {
    position: absolute;
    top: auto;
    bottom: 50vh;
    transform: translateY(calc(78 * var(--rpxClamp)));
  }
}
.sec-9action .start-anchor {
  position: absolute;
  pointer-events: none;
  visibility: hidden;
  top: calc(146 * var(--rpxClamp));
  width: 50px;
  transform: translateY(50%);
  height: 100vh;
  background: #eee;
}

/* 繝槭�繧ｭ繝ｼ */
.markie-img-list {
  width: 100%;
  height: clamp(0px, 26.9444444444vw, 543.2px);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .markie-img-list {
    width: 100vw;
    margin-left: calc(-20 * var(--rpxClamp));
    height: clamp(0px, 55.4666666667vw, 291.2px);
  }
}
.markie-img-list.inview-0 ul {
  animation-play-state: running;
  will-change: transform;
}
.markie-img-list ul {
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation: company-slide-markie 40s linear 0s infinite normal;
  animation-play-state: paused;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  width: auto;
  height: 100%;
  justify-content: start;
  flex-wrap: nowrap;
  animation-play-state: paused;
  gap: 0;
}
@media screen and (max-width: 767px) {
  .markie-img-list ul {
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    animation: company-slide-markie 40s linear 0s infinite normal;
    animation-play-state: paused;
  }
}
.markie-img-list ul li {
  width: clamp(0px, 40.8333333333vw, 823.2px);
}
@media screen and (max-width: 767px) {
  .markie-img-list ul li {
    width: clamp(0px, 83.7333333333vw, 439.6px);
  }
}
.markie-img-list ul li img {
  width: auto;
  height: 100%;
}

/*
@note 莠区･ｭ邏ｹ莉九�縺薙ｌ縺九ｉ縺ｮDAZZY
*/
@media screen and (min-width: 768px) {
  .sec-bussiness {
    --section-padding-top:calc(160 * var(--rpxClamp));
    --section-padding-bottom:calc(0 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .sec-bussiness {
    padding: 0 20px !important;
    padding-top: calc(60 * var(--rpxClamp)) !important;
  }
}
.sec-bussiness .bussiness-box-wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0px, 2.0833333333vw, 42px);
}
@media screen and (max-width: 767px) {
  .sec-bussiness .bussiness-box-wrap {
    gap: clamp(0px, 5.3333333333vw, 28px);
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box {
  background: #fff;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box:nth-of-type(2n) .img {
  order: 2;
}
@media screen and (min-width: 768px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box .img {
    width: clamp(0px, 41.875vw, 844.2px);
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box .txt {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box .txt {
    height: clamp(0px, 62.9333333333vw, 330.4px);
    gap: clamp(0px, 2.6666666667vw, 14px);
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box .txt h3 {
  line-height: 1;
  font-size: 24px;
}
@media screen and (max-width: 767px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box .txt h3 {
    font-size: clamp(0px, 4.8vw, 25.2px);
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box .txt p {
  text-align: center;
  margin-top: -0.4em;
  margin-bottom: -0.4em;
}
.sec-bussiness .bussiness-box-wrap .bussiness-box .txt .DAZZY {
  margin-top: clamp(0px, 1.1111111111vw, 22.4px);
}
@media screen and (max-width: 767px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box .txt .DAZZY {
    margin-top: 0;
    height: clamp(0px, 10.6666666667vw, 56px);
    width: auto;
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box .txt .DRW {
  margin-top: clamp(0px, 1.6666666667vw, 33.6px);
}
@media screen and (max-width: 767px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box .txt .DRW {
    margin-top: 0;
    height: clamp(0px, 16vw, 84px);
    width: auto;
    padding: clamp(0px, 1.3333333333vw, 7px);
  }
}

.sec-future {
  --header-color: var(--color-black-text);
  --section-padding-top:clamp(0px, 6.9444444444vw, 140px);
  --section-padding-bottom:clamp(0px, 10.4166666667vw, 210px);
}
@media screen and (max-width: 767px) {
  .sec-future {
    padding: 0 clamp(0px, 5.3333333333vw, 28px);
    --section-padding-top:clamp(0px, 13.3333333333vw, 70px);
    --section-padding-bottom:clamp(0px, 18.6666666667vw, 98px);
  }
  .sec-future hgroup {
    text-align: center;
  }
}
.sec-future .future-box {
  margin-top: clamp(0px, 2.7777777778vw, 56px);
  padding: clamp(0px, 2.7777777778vw, 56px);
  background: #fff;
}
@media screen and (max-width: 767px) {
  .sec-future .future-box {
    margin-top: clamp(0px, 5.3333333333vw, 28px);
    padding: clamp(0px, 5.3333333333vw, 28px);
  }
}
.sec-future .future-box .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 767px) {
  .sec-future .future-box .inner {
    display: block;
  }
}
.sec-future .future-box .inner .txt {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .sec-future .future-box .inner .txt {
    padding-left: clamp(0px, 3.125vw, 63px);
    gap: 23px;
  }
}
.sec-future .future-box .inner .txt * {
  width: 100%;
}
.sec-future .future-box .inner .txt h3 {
  line-height: 1;
  font-size: clamp(0px, 2.0138888889vw, 40.6px);
}
@media screen and (max-width: 767px) {
  .sec-future .future-box .inner .txt h3 {
    margin-top: clamp(0px, 5.3333333333vw, 28px);
    font-size: clamp(0px, 4.8vw, 25.2px);
    margin-bottom: clamp(0px, 2.6666666667vw, 14px);
  }
}
.sec-future .future-box .inner .txt p {
  line-height: 1.8;
  font-weight: 300;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .sec-future .future-box .inner .txt p {
    white-space: normal;
    font-size: clamp(0px, 4.2666666667vw, 22.4px);
  }
  .sec-future .future-box .inner .txt p br {
    display: none;
  }
}

/*
@note 莨夂､ｾ讎りｦ�
*/
.sec-company {
  --header-color: var(--color-black-text);
  --section-padding-top:clamp(0px, 8.3333333333vw, 168px);
  --section-padding-bottom:clamp(0px, 10.4166666667vw, 210px);
}
@media screen and (max-width: 767px) {
  .sec-company {
    padding: 0 clamp(0px, 5.3333333333vw, 28px);
    --header-color: var(--color-accent);
    --section-padding-top:clamp(0px, 14.6666666667vw, 77px);
    --section-padding-bottom:clamp(0px, 18.6666666667vw, 98px);
  }
  .sec-company h2 {
    align-items: flex-start;
  }
}

@media screen and (max-width: 767px) {
  .company-info-dl-grp {
    margin-top: clamp(0px, 5.3333333333vw, 28px);
  }
}
@media screen and (min-width: 768px) {
  .company-info-dl-grp dl {
    display: grid;
    grid-template-columns: 190px 1fr;
  }
}
@media screen and (max-width: 767px) {
  .company-info-dl-grp dl {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    padding: clamp(0px, 6.4vw, 33.6px) 0;
  }
}

/* -----------------------------
@map 莉穂ｺ九ｒ遏･繧� / 莉穂ｺ狗ｴｹ莉�
----------------------------- */
#page-work .secondary-page-title-header .img:before {
  background: rgba(0, 0, 0, 0.45);
}

section.sec-ourjobs {
  --section-padding-bottom: calc(160 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  section.sec-ourjobs {
    padding: clamp(0px, 13.3333333333vw, 70px) clamp(0px, 5.3333333333vw, 28px);
    padding-bottom: clamp(0px, 18.6666666667vw, 98px);
  }
}

/*
@note 莉穂ｺ九Μ繧ｹ繝�
*/
.work-list {
  --card-list-gap:clamp(0px, 6.25vw, 126px) clamp(0px, 4.8611111111vw, 98px);
  --arrow-bg-color: var(--color-accent);
  --arrow-inner-color: #fff;
  --btn-circle-border-color: var(--color-accent);
  margin-top: clamp(0px, 2.9861111111vw, 60.2px);
}
@media screen and (max-width: 767px) {
  .work-list {
    margin-top: clamp(0px, 8vw, 42px);
    gap: clamp(0px, 10.6666666667vw, 56px);
  }
}
.work-list li {
  grid-row: span 3;
  gap: clamp(0px, 1.9444444444vw, 39.2px);
}
@media screen and (max-width: 767px) {
  .work-list li {
    gap: clamp(0px, 5.3333333333vw, 28px);
  }
}
.work-list li .img {
  margin-bottom: clamp(0px, 0.6944444444vw, 14px);
  height: clamp(0px, 20.1388888889vw, 406px);
}
@media screen and (max-width: 767px) {
  .work-list li .img {
    height: clamp(0px, 55.4666666667vw, 291.2px);
  }
}
.work-list li .txt {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  justify-content: start;
  gap: clamp(0px, 0.9722222222vw, 19.6px);
}
@media screen and (max-width: 767px) {
  .work-list li .txt {
    gap: clamp(0px, 2.1333333333vw, 11.2px);
  }
  .work-list li .txt h3 {
    font-weight: 500;
  }
}
.work-list li .txt * {
  width: 100%;
}
.work-list li .link {
  text-align: right;
}
@media screen and (max-width: 767px) {
  .work-list li .link {
    margin-top: clamp(-14px, -2.6666666667vw, 0px);
  }
}
.work-list li .link a {
  display: inline-flex;
}
.work-list li.no-timeline a {
  pointer-events: none;
}
.work-list li.no-timeline .txt {
  grid-row: span 2;
}
.work-list li.no-timeline .link {
  display: none;
}

/*
@note *繝昴ャ繝励い繝��*繧ｹ繧ｱ繧ｸ繝･繝ｼ繝ｫ
*/
.work-detail-display-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background: var(--color-accent);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: 500ms;
}
body:has(.work-detail-display:target) .work-detail-display-bg {
  opacity: 1;
  pointer-events: auto;
}

.work-detail-display {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 11;
  height: 100vh;
  width: clamp(0px, 59.4444444444vw, 1198.4px);
  background: #fff;
  pointer-events: none;
  transform: translate(100%, 0);
  transition: 800ms cubic-bezier(0.34, 0.27, 0, 1);
}
@media screen and (max-width: 767px) {
  .work-detail-display {
    width: calc(100vw - clamp(0px, 10.6666666667vw, 56px));
  }
}
.work-detail-display:target {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0);
}
.work-detail-display .inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  z-index: 1;
  overscroll-behavior: contain;
}
.work-detail-display .close {
  position: absolute;
  width: clamp(0px, 3.125vw, 63px);
  height: clamp(0px, 3.1944444444vw, 64.4px);
  top: clamp(0px, 4.7222222222vw, 95.2px);
  right: clamp(0px, 9.5833333333vw, 193.2px);
  z-index: 3;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .work-detail-display .close {
    top: 32px;
    width: calc(35 * var(--rpxClamp));
    height: auto;
  }
}
.work-detail-display .close:hover {
  transform: scale(1.05);
}
.work-detail-display .close:active {
  transform: scale(1);
}
.work-detail-display .close img {
  width: 100%;
  height: 100%;
}
.work-detail-display h2 {
  width: clamp(0px, 8.8888888889vw, 179.2px);
  height: clamp(0px, 8.8888888889vw, 179.2px);
  border-radius: 100%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  line-height: 1;
  position: absolute;
  top: clamp(0px, 5vw, 100.8px);
  left: clamp(0px, 7.6388888889vw, 154px);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .work-detail-display h2 {
    width: clamp(0px, 24.2666666667vw, 127.4px);
    height: clamp(0px, 24.2666666667vw, 127.4px);
    font-size: clamp(0px, 3.2vw, 16.8px);
    top: clamp(0px, 11.4666666667vw, 60.2px);
    left: clamp(0px, 3.2vw, 16.8px);
  }
}

.work-detail {
  padding: clamp(0px, 8.3333333333vw, 168px) clamp(0px, 15.1388888889vw, 305.2px) clamp(0px, 10.4166666667vw, 210px) clamp(0px, 10.2777777778vw, 207.2px);
  position: relative;
  overflow: hidden;
}
.work-detail > * {
  z-index: 1;
  position: relative;
}
.work-detail:before {
  content: "";
  display: block;
  width: 200%;
  height: 100%;
  z-index: 0;
  position: absolute;
  top: clamp(0px, 23.2638888889vw, 469px);
  left: -100px;
  background: var(--color-gray-lite-bg);
}
@media screen and (max-width: 767px) {
  .work-detail:before {
    top: calc(205 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .work-detail {
    padding: clamp(0px, 24vw, 126px) clamp(0px, 8.8vw, 46.2px) clamp(0px, 18.6666666667vw, 98px) clamp(0px, 8.8vw, 46.2px);
  }
}
.work-detail h3 {
  margin: clamp(0px, 4.1666666667vw, 84px) 0 clamp(0px, 3.4722222222vw, 70px) 0;
  font-size: clamp(0px, 1.1111111111vw, 22.4px);
  line-height: 1.8;
  padding-bottom: clamp(0px, 1.25vw, 25.2px);
  border-bottom: clamp(0px, 0.0694444444vw, 1.4px) solid var(--color-black-text);
}
@media screen and (max-width: 767px) {
  .work-detail h3 {
    font-size: 16px;
    font-weight: 500;
    padding-bottom: clamp(0px, 2.6666666667vw, 14px);
    margin: clamp(0px, 6.9333333333vw, 36.4px) 0 clamp(0px, 4.5333333333vw, 23.8px) 0;
  }
}
.work-detail .img {
  border-radius: calc(5 * var(--rpxClamp));
}
.work-detail .dl-grp {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0px, 4.1666666667vw, 84px);
  position: relative;
}
@media screen and (max-width: 767px) {
  .work-detail .dl-grp {
    font-size: calc(13 * var(--rpxClamp));
  }
}
.work-detail .dl-grp:before {
  content: "";
  display: block;
  height: 100%;
  width: 1px;
  background-image: url(../img/work/border-dot@3x.png);
  background-size: 1px auto;
  position: absolute;
  top: clamp(0px, 0.8333333333vw, 16.8px);
  left: clamp(0px, 6.6666666667vw, 134.4px);
}
@media screen and (max-width: 767px) {
  .work-detail .dl-grp:before {
    display: none;
  }
}
.work-detail .dl-grp dl.timeline {
  width: 100%;
  display: grid;
  grid-template-columns: calc(75 * var(--rpxClamp)) 1fr;
  gap: clamp(0px, 3.1944444444vw, 64.4px);
}
@media screen and (max-width: 767px) {
  .work-detail .dl-grp dl.timeline {
    gap: 20px;
    grid-template-columns: calc(64 * var(--rpxClamp)) 1fr;
  }
}
.work-detail .dl-grp dl.timeline dt {
  height: calc(26 * var(--rpxClamp));
  background: var(--color-black-text);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  line-height: 1;
  border-radius: 50px;
}
@media screen and (max-width: 767px) {
  .work-detail .dl-grp dl.timeline dt {
    height: 23px;
    white-space: nowrap;
  }
}
.work-detail .dl-grp dl.timeline dd h4 {
  margin-bottom: 0.5em;
  line-height: 24px;
}
@media screen and (max-width: 767px) {
  .work-detail .dl-grp dl.timeline dd h4 {
    margin-bottom: 0.35em;
  }
}

/* -----------------------------
@map Day in the life 1譌･蟇�捩蜍慕判
----------------------------- */
@media screen and (max-width: 767px) {
  #page-day-in-the-life h1 .en {
    font-size: calc(50 * var(--rpxClamp));
  }
}

@media screen and (max-width: 767px) {
  #day-in-the-life {
    padding: calc(50 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
  #day-in-the-life .lead {
    text-align: center !important;
  }
}

.youtube-wrap {
  width: clamp(0px, 62.5vw, 1260px);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .youtube-wrap {
    width: 100%;
  }
}
.youtube-wrap iframe {
  width: 100%;
}

.sec-correlation-map {
  background: var(--color-gray-lite-bg);
}
@media screen and (max-width: 767px) {
  .sec-correlation-map {
    padding: calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
  .sec-correlation-map .lead {
    text-align: center !important;
  }
}
.sec-correlation-map .img-wrap {
  width: clamp(0px, 62.5vw, 1260px);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .sec-correlation-map .img-wrap {
    width: 100%;
  }
}

/* -----------------------------
@map 莉ｲ髢薙ｒ遏･繧� / 繧ｹ繧ｿ繝�ヵ繧､繝ｳ繧ｿ繝薙Η繝ｼ
----------------------------- */
.sec-interview {
  counter-reset: number 0;
  background-color: #f5f2f2;
  gap: calc(40 * var(--rpxClamp));
  padding-bottom: clamp(0px, 14.5833333333vw, 294px);
  position: relative;
  background-image: url(../img/global/dot-bg-04@2x.jpg);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .sec-interview {
    padding: calc(50 * var(--rpxClamp)) calc(10 * var(--rpxClamp)) calc(70 * var(--rpxClamp)) calc(10 * var(--rpxClamp));
    background-image: url(../img/global/dot-bg-04-sp@2x.jpg);
    gap: clamp(0px, 5.3333333333vw, 28px);
  }
  .sec-interview:before {
    content: "";
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: linear-gradient(-180deg, #f4f4f4 50%, rgba(244, 244, 244, 0) 100%);
  }
  .sec-interview > * {
    z-index: 1;
    position: relative;
  }
  .sec-interview .lead {
    text-align: center !important;
    margin-bottom: calc(50 * var(--rpxClamp)) !important;
  }
}

@media screen and (max-width: 767px) {
  .interview-item-list {
    gap: calc(20 * var(--rpxClamp));
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (max-width: 767px) {
  .inner-bg.interview-item .btn-circle-anchor {
    right: calc(10 * var(--rpxClamp));
    bottom: calc(30 * var(--rpxClamp));
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item {
    width: var(--max-width);
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item header {
    grid-template-columns: 50% 50%;
    height: clamp(0px, 24.7916666667vw, 499.8px);
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .header-img {
    order: 1;
    height: calc(193 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .title {
    order: 2;
    padding: 12px 20px 28px 20px;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .title .message:before {
    width: calc(86 * var(--rpxClamp));
    height: calc(83 * var(--rpxClamp));
    right: calc(40 * var(--rpxClamp));
    top: calc(8 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .title .message p {
    font-size: calc(20 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .title .message:after {
    margin: calc(15 * var(--rpxClamp)) 0;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .title h2 .ja {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item header .btn-circle-anchor {
    right: clamp(0px, 3.4722222222vw, 70px);
    bottom: clamp(0px, 3.4722222222vw, 70px);
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .btn-circle-anchor {
    top: clamp(0px, 33.0666666667vw, 173.6px);
    right: clamp(0px, 0vw, 0px);
  }
}
.open .btn-circle-anchor {
  transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
  .open .btn-circle-anchor {
    bottom: calc(10 * var(--rpxClamp)) !important;
  }
}

@media screen and (min-width: 768px) {
  .inner-bg.interview-item article > .inner {
    width: clamp(0px, 56.25vw, 1134px);
    margin: clamp(0px, 6.9444444444vw, 140px) auto clamp(0px, 9.2361111111vw, 186.2px) auto;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item article > .inner {
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item article .article-inner-body {
    gap: clamp(0px, 8vw, 42px);
    padding: 0 var(--section-inner-gap);
    padding: 0 calc(20 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .text-item h3 {
    font-size: calc(16 * var(--rpxClamp));
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item .text-item h3 span {
    line-height: 1;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .text-item h3 span:before {
    font-size: calc(12 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .text-item h3:before {
    font-size: calc(16 * var(--rpxClamp));
    width: calc(33 * var(--rpxClamp));
    height: calc(33 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .text-item p {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap {
    margin: calc(80 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(60 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
    padding: calc(64 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
    border-radius: calc(24 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap:before {
    width: calc(85 * var(--rpxClamp));
    height: calc(83 * var(--rpxClamp));
    right: calc(20 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap h3 {
    font-size: calc(26 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap .img {
    left: calc(-10 * var(--rpxClamp));
    margin: calc(30 * var(--rpxClamp)) 0;
    height: calc(180 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap .result {
    border-radius: calc(24 * var(--rpxClamp));
    padding: calc(25 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap .result h4 {
    font-size: calc(16 * var(--rpxClamp));
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item .indispensable-item-wrap {
    margin-top: clamp(0px, 4.8611111111vw, 98px);
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-wrap + .btn-wrap {
    margin-top: calc(77 * var(--rpxClamp)) !important;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-list {
    gap: calc(22 * var(--rpxClamp));
    padding: 0 calc(30 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-list .item {
    font-size: calc(13 * var(--rpxClamp));
    width: 100%;
    display: grid;
    grid-template-columns: calc(100 * var(--rpxClamp)) 1fr;
    gap: 0 calc(15 * var(--rpxClamp));
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item .indispensable-item-list .item h4 {
    margin-bottom: 0.6em;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-list .item h4 {
    font-weight: 500;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-list .item p {
    grid-column: 2;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-list .img {
    width: calc(100 * var(--rpxClamp));
    height: calc(100 * var(--rpxClamp));
  }
}

@media screen and (min-width: 768px) {
  .interview-index {
    transform: translateX(100%);
  }
}
@media screen and (max-width: 767px) {
  .interview-index {
    width: calc(42 * var(--rpxClamp));
    top: calc(22 * var(--rpxClamp));
    right: calc(22 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .interview-index i {
    font-size: calc(10 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .interview-index .number {
    font-size: calc(44 * var(--rpxClamp));
  }
}

/* -----------------------------
@map 迺ｰ蠅�ｒ遏･繧� /enbionment
----------------------------- */
/*
@note 隧穂ｾ｡蛻ｶ蠎ｦ
*/
@media screen and (max-width: 767px) {
  #page-environment h1 .en {
    font-size: calc(50 * var(--rpxClamp));
  }
}

section.sec-assessment {
  --section-padding-top: calc(130 * var(--rpxClamp));
  --section-padding-bottom: calc(130 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  section.sec-assessment {
    padding: calc(50 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
  section.sec-assessment hgroup {
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  section.sec-assessment .inner {
    width: clamp(0px, 72.9166666667vw, 1470px);
  }
}
@media screen and (min-width: 768px) {
  section.sec-assessment .grid {
    display: grid;
    grid-template-columns: clamp(0px, 21.5277777778vw, 434px) clamp(0px, 47.7083333333vw, 961.8px);
    justify-content: space-between;
    align-items: center;
  }
}
section.sec-assessment .grid ._2 {
  position: relative;
}
section.sec-assessment .grid ._2:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 0 0;
  margin: auto;
  width: 0%;
  height: 0%;
  z-index: 0;
  border: 1px solid #707070;
  border-radius: 100%;
  transition: 1500ms ease-in-out;
}
section.sec-assessment .grid ._2.inview-100:before {
  transform: scale(1);
  width: 63%;
  height: 63%;
}
section.sec-assessment .grid ._2 > * {
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  section.sec-assessment p.lead {
    text-align: justify !important;
  }
}
@media screen and (max-width: 767px) {
  section.sec-assessment p.lead {
    text-align: center;
    margin-bottom: calc(12 * var(--rpxClamp));
  }
}
section.sec-assessment .txt-banner {
  font-size: clamp(0px, 8.1944444444vw, 165.2px);
  color: var(--color-gray-hairline-lite);
}
@media screen and (max-width: 767px) {
  section.sec-assessment .txt-banner {
    overflow: hidden;
    font-size: calc(61 * var(--rpxClamp));
    width: 100%;
    text-align: center;
    line-height: calc(74 * var(--rpxClamp));
  }
  section.sec-assessment .txt-banner .en {
    display: block;
  }
}

/*
@note 遖丞茜蜴夂函
*/
section.sec-benefits {
  background: var(--color-gray-lite-bg);
  --section-padding-top:clamp(0px, 10.4166666667vw, 210px);
  --section-padding-bottom: clamp(0px, 12.9166666667vw, 260.4px);
}
@media screen and (max-width: 767px) {
  section.sec-benefits {
    padding: calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
  section.sec-benefits .lead {
    text-align: center !important;
  }
}
section.sec-benefits h3 {
  display: flex;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.sec-benefits h3 {
    width: clamp(0px, 69.4444444444vw, 1400px);
    margin-bottom: clamp(0px, 2.7083333333vw, 54.6px);
  }
}
@media screen and (max-width: 767px) {
  section.sec-benefits h3 {
    margin-bottom: calc(16 * var(--rpxClamp));
  }
}
section.sec-benefits h4 {
  margin: 0 auto;
  font-size: calc(20 * var(--rpxClamp));
  line-height: 1.2;
  margin-bottom: calc(14 * var(--rpxClamp));
}
@media screen and (min-width: 768px) {
  section.sec-benefits h4 {
    width: clamp(0px, 69.4444444444vw, 1400px);
  }
}
@media screen and (max-width: 767px) {
  section.sec-benefits h4 {
    font-size: calc(14 * var(--rpxClamp));
    margin-bottom: calc(12 * var(--rpxClamp));
  }
}
section.sec-benefits h4:before {
  content: "笆� ";
  color: var(--color-accent);
}
@media screen and (max-width: 767px) {
  section.sec-benefits h4.slide-title {
    padding: 0 calc(20 * var(--rpxClamp));
  }
}
section.sec-benefits .inner-repeat-block-grp {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  gap: clamp(0px, 4.8611111111vw, 98px);
}
@media screen and (min-width: 768px) {
  section.sec-benefits .inner-repeat-block-grp {
    max-width: 100vw;
  }
}
@media screen and (max-width: 767px) {
  section.sec-benefits .inner-repeat-block-grp {
    gap: calc(40 * var(--rpxClamp));
  }
}
section.sec-benefits .inner-repeat-block-grp .inner {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.sec-benefits .inner-repeat-block-grp .inner {
    width: clamp(0px, 69.4444444444vw, 1400px);
  }
}
@media screen and (max-width: 767px) {
  section.sec-benefits .inner-repeat-block-grp .inner .img {
    height: calc(250 * var(--rpxClamp));
  }
}

/*
@note - - 繧ｹ繝ｩ繧､繝�
*/
.envionment-slide-wrap {
  overflow: hidden;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0px, 3.4722222222vw, 70px);
  max-width: 100vw;
  overflow: visible;
}
.envionment-slide-wrap h4 {
  padding: 0 calc(20 * var(--rpxClamp));
}
.envionment-slide-wrap .item {
  margin: 0 clamp(0px, 1.7361111111vw, 35px);
  padding-bottom: clamp(0px, 3.4722222222vw, 70px);
}
@media screen and (min-width: 768px) {
  .envionment-slide-wrap .item {
    width: clamp(0px, 69.4444444444vw, 1400px) !important;
  }
}
@media screen and (max-width: 767px) {
  .envionment-slide-wrap .item {
    width: 100vw;
    padding: 0 20px;
  }
}
.envionment-slide-wrap .item .img {
  height: clamp(0px, 32.3611111111vw, 652.4px);
}
@media screen and (max-width: 767px) {
  .envionment-slide-wrap .item .img {
    height: calc(250 * var(--rpxClamp));
  }
}
.envionment-slide-wrap .item .desc {
  font-weight: 500;
  line-height: 1.5;
  margin-top: clamp(0px, 1.25vw, 25.2px);
}

.slick-custom-btn {
  width: clamp(0px, 69.4444444444vw, 1400px);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-end;
  gap: clamp(0px, 1.3888888889vw, 28px);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .slick-custom-btn {
    display: none;
  }
}
.slick-custom-btn .btn:hover {
  transform: scale(1.05);
}
.slick-custom-btn .btn:active {
  transform: scale(1);
}
.slick-custom-btn .btn-circle-anchor {
  --btn-circle-inner-color: #fff !important;
  --btn-circle-size: clamp(0px, 3.75vw, 75.6px);
  --btn-circle-anchor-size: clamp(0px, 0.625vw, 12.6px);
  --btn-circle-bg-color: var(--color-black-text);
}

.slick-dots {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  --dott-color: #D5D5D5;
  height: calc(54 * var(--rpxClamp));
  align-items: center;
}
@media screen and (min-width: 768px) {
  .slick-dots {
    transform: translate(0, 100%);
  }
}
@media screen and (max-width: 767px) {
  .slick-dots {
    height: auto;
    gap: calc(8 * var(--rpxClamp));
    position: relative;
    margin-top: calc(16 * var(--rpxClamp));
  }
}
.slick-dots li {
  height: calc(30 * var(--rpxClamp));
  width: calc(30 * var(--rpxClamp));
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .slick-dots li {
    width: auto;
    height: auto;
  }
}
.slick-dots li.slick-active {
  --dott-color: var(--color-black-text);
}
.slick-dots button {
  padding: 0;
  font-size: 0;
  appearance: none;
  border: none;
  border-radius: 100%;
}
.slick-dots button:before {
  content: "";
  width: calc(10 * var(--rpxClamp));
  height: calc(10 * var(--rpxClamp));
  display: block;
  background: var(--dott-color);
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  .slick-dots button:before {
    width: 6px;
    height: 6px;
  }
}

/*
@note 遉ｾ蜀�う繝吶Φ繝�
*/
section.sec-event {
  --section-padding-top:clamp(0px, 10.4166666667vw, 210px);
  --section-padding-bottom: clamp(0px, 11.1111111111vw, 224px);
  background-image: url(/wp-content/themes/recruit.dazzy.co.jp/assets/img/environment/event-bg@3x.jpg);
  background-size: cover;
  --title-color: #fff;
}
@media screen and (max-width: 767px) {
  section.sec-event {
    padding: calc(60 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
}

.event-list {
  margin-top: clamp(0px, 2.6388888889vw, 53.2px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0px, 2.6388888889vw, 53.2px);
  color: #fff;
}
@media screen and (min-width: 768px) {
  .event-list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-wrap: wrap;
    justify-content: center;
  }
  .event-list dl {
    width: calc(481 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .event-list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: calc(20 * var(--rpxClamp));
    gap: calc(16 * var(--rpxClamp));
  }
}
.event-list dl {
  height: clamp(0px, 9.1666666667vw, 184.8px);
  background: var(--color-accent);
  line-height: 1.45;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0px, 0.4166666667vw, 8.4px);
}
@media screen and (max-width: 767px) {
  .event-list dl {
    width: 100%;
    height: calc(107 * var(--rpxClamp));
  }
}
.event-list dl dt {
  font-size: clamp(0px, 1.3888888889vw, 28px);
}
@media screen and (max-width: 767px) {
  .event-list dl dt {
    font-size: calc(18 * var(--rpxClamp));
  }
}
.event-list dl dd {
  font-size: clamp(0px, 1.1111111111vw, 22.4px);
}
@media screen and (max-width: 767px) {
  .event-list dl dd {
    font-size: calc(13 * var(--rpxClamp));
  }
}

/* -----------------------------
@map 謨ｰ蟄励〒隕九ｋdazzy
----------------------------- */
/*
@note 繝��繧ｿ邱ｨ
*/
@media screen and (max-width: 767px) {
  #page-data-of-dazzy h1 .en {
    font-size: calc(50 * var(--rpxClamp));
  }
}

.sec-data {
  background: var(--color-gray-lite-bg);
}
@media screen and (max-width: 767px) {
  .sec-data {
    padding: calc(50 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
  .sec-data .lead {
    text-align: center !important;
  }
}

.data-list-grp {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(0px, 2.2222222222vw, 44.8px);
}
@media screen and (max-width: 767px) {
  .data-list-grp {
    grid-template-columns: 1fr 1fr;
    gap: calc(10 * var(--rpxClamp));
  }
}
.data-list-grp li {
  background: #fff;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}
.data-list-grp li.col-2 {
  grid-column: span 2;
  display: block;
  padding-bottom: calc(50 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .data-list-grp li.col-2 {
    padding-bottom: calc(20 * var(--rpxClamp));
  }
}
.data-list-grp li .row {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: clamp(0px, 2.7777777778vw, 56px);
  margin-top: clamp(0px, 1.5972222222vw, 32.2px);
}
.data-list-grp li .row .img {
  margin: 0;
}
@media screen and (max-width: 767px) {
  .data-list-grp li .row .img.graf {
    width: calc(173 * var(--rpxClamp));
    height: auto;
  }
  .data-list-grp li .row .img.graf img {
    width: 100% !important;
    height: auto !important;
  }
}
.data-list-grp li .row .data {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  justify-content: center;
  align-items: flex-start;
}
.data-list-grp li .row .data p {
  line-height: 1.225;
}
.data-list-grp li .row .data .year {
  display: block;
  font-weight: 500;
}
.data-list-grp li .row .data .caption {
  display: block;
  font-size: 12px;
}
@media screen and (max-width: 767px) {
  .data-list-grp li .row .data .caption {
    font-size: 9px;
    line-height: 14px;
  }
}
.data-list-grp li h3 {
  text-align: center;
  margin-top: clamp(0px, 4.1666666667vw, 84px);
  font-size: clamp(0px, 1.3888888889vw, 28px);
}
@media screen and (max-width: 767px) {
  .data-list-grp li h3 {
    font-size: 13px;
    height: 3em;
    text-align: center;
    grid-row: 1;
    margin-top: calc(16 * var(--rpxClamp));
    display: grid;
    align-items: center;
    line-height: 1.3;
  }
}
.data-list-grp li .img {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: clamp(0px, 1.25vw, 25.2px);
  margin-bottom: calc(8 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .data-list-grp li .img {
    margin: 6px 0;
    height: clamp(0px, 12.2666666667vw, 64.4px);
  }
  .data-list-grp li .img img {
    height: 100% !important;
    width: auto !important;
  }
}
.data-list-grp li .data {
  margin-bottom: clamp(0px, 3.8888888889vw, 78.4px);
  text-align: center;
  white-space: nowrap;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .data-list-grp li .data {
    margin-bottom: calc(20 * var(--rpxClamp));
  }
}
.data-list-grp li .data .en {
  color: var(--color-accent);
  font-size: calc(80 * var(--rpxClamp));
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .data-list-grp li .data .en {
    font-size: calc(44 * var(--rpxClamp));
  }
}
.data-list-grp li .data .en i {
  font-size: clamp(0px, 4.1666666667vw, 84px);
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .data-list-grp li .data .en i {
    font-size: calc(36 * var(--rpxClamp));
  }
}
.data-list-grp li .data .ja {
  font-size: clamp(0px, 1.6666666667vw, 33.6px);
}
@media screen and (max-width: 767px) {
  .data-list-grp li .data .ja {
    font-size: 13px;
  }
}

/*
@note 繧｢繝ｳ繧ｱ繝ｼ繝育ｷｨ
*/
.sec-enquete {
  --section-padding-top:clamp(0px, 8.4722222222vw, 170.8px);
  --section-padding-bottom: clamp(0px, 17.3611111111vw, 350px);
}
@media screen and (max-width: 767px) {
  .sec-enquete {
    padding: calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) !important;
  }
  .sec-enquete .lead {
    text-align: center !important;
  }
}

.graf-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0px, 8.3333333333vw, 168px) clamp(0px, 5.9722222222vw, 120.4px);
  --graf-size: calc(284 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .graf-list {
    grid-template-columns: 1fr;
    gap: calc(0 * var(--rpxClamp));
  }
}
.graf-list dl {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0px, 8.1944444444vw, 165.2px);
}
@media screen and (max-width: 767px) {
  .graf-list dl {
    gap: 0;
  }
}
.graf-list dl dt {
  background: var(--color-black-text);
  height: clamp(0px, 4.0972222222vw, 82.6px);
  color: #fff;
  font-size: clamp(0px, 1.3888888889vw, 28px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .graf-list dl dt {
    height: 44px;
    font-size: 14px;
  }
}
.graf-list dl .img {
  width: var(--graf-size);
  height: var(--graf-size);
  background: #eee;
  overflow: visible;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .graf-list dl .img {
    width: 100% !important;
    height: auto !important;
  }
}
@media screen and (min-width: 768px) {
  .graf-list dl .img img {
    width: clamp(0px, 34.7222222222vw, 700px);
    height: clamp(0px, 34.7222222222vw, 700px);
  }
}
@media screen and (max-width: 767px) {
  .graf-list dl .img img {
    width: 100%;
    height: 100%;
  }
}

#global-navi {
  pointer-events: none;
  opacity: 0;
  transition: 500ms ease-in-out;
}
.show-gnav #global-navi {
  pointer-events: auto;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  #global-navi .bg {
    height: 150vh;
  }
}

#global-navi .bg {
  transform: var(--translateX);
  transition: var(--transition);
  opacity: var(--opacity);
}

#global-navi .bg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background: #FEE603;
  background-size: cover;
  background-position: top center;
}

@media screen and (max-width: 767px) {
  #global-navi .bg {
    position: fixed;
    background: #FEE603;
  }
}


.flip-card {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.flip-card-wrap {
  overflow: hidden;
}

.en.sub::before {
  content: "ー";
  width: 0.65em;
  height: 1px;
  color: #015eea;
  margin-right: 5px;
}

.card-list li .en{
  color: #2D8E3B;
}

.card-list li p{
  display: block;
  margin-bottom: 30px;
}

.card-list li .btn-link {
  float: right;
}

.top-sec#people .lead br{
  display: block;
}


section#page-footer .btn-entry-wrap .arrow i{
  padding-left: 10px;
}


a.btn-entry .fa-solid.fa-arrow-right{
  color: #000 !important;
  padding-left: 10px;
  color: #FFF !important;
}

.top-sec#whatwork {
  padding-top: clamp(0px, 5.1388888889vw, 103.6px);
  padding-bottom: clamp(0px, 12.3611111111vw, 249.2px);
}

.interview-list{
  margin-top: 50px;
}

#whatwork img,
#faq img,
#culture img{
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
}


@media screen and (max-width: 767px) {
  .top-sec#whatwork,
  .top-sec#faq,
  .top-sec#culture
  {
    padding: clamp(0px, 17.3333333333vw, 91px) clamp(0px, 5.3333333333vw, 28px) clamp(0px, 17.3333333333vw, 91px) clamp(0px, 5.3333333333vw, 28px);
  }

  .top-sec hgroup + .lead{
    margin-bottom: 30px;
  }

  .interview-list{
    margin-top: 5px;
  }
  
}


@media screen and (max-width: 767px) {
  .top-sec#whatwork .img,
  .top-sec#faq .img,
  .top-sec#culture .img{
    height: 168px;
  }
}

  #faq .horizontal-wrap.block2{
    margin-top: 50px;
  }


@media screen and (min-width: 1024px) {
  #faq .horizontal-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }

  #faq .horizontal-wrap.block1 hgroup {
    width: 60%;
  }

  #faq .horizontal-wrap.block1 .img {
    width: 40%;
    flex: 0 0 560px;
  }

  #faq .horizontal-wrap.block2 hgroup {
    width: 50%;
  }

  #faq .horizontal-wrap.block2 .lead {
    width: 50%;
    margin-top: 0;
  }

  #faq .horizontal-wrap.block2 {
    align-items: flex-start;
    margin-top: 60px;
  }

#faq .horizontal-wrap.block2 .lead  br{
    display: none;
  }

  #faq .horizontal-wrap.block2 hgroup,
  #faq .horizontal-wrap.block2 .lead {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  #culture .culture-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }

  #culture .culture-text {
    flex: 1;
  }

  #culture .img {
    flex: 0 0 560px;
  }

  #culture .img img {
    width: 100%;
    height: auto;
    display: block;
  }
}

#faq .lead a,
.culture-text a{
  color: #FFF;
  width: 80%;
  margin: 30px auto;
  padding: 15px;
  text-align: center;
  border: none;
}
#faq .lead a:hover,
.culture-text a:hover{
  outline: none;
  color: #FFF;
  opacity: 0.7;
}

@media screen and (min-width: 768px) {
  #faq .lead a,
  .culture-text a{
    margin-left: 0;
    width: 50%;
  }
}


/* ======================== */
/* ▶︎ 404 Not Found Page */
/* ======================== */
#error-404 {
  padding: 80px 20px;
  text-align: center;
  background: linear-gradient(135deg, #f0f4ff, #e0ecff);
}

#error-404 .inner {
  max-width: 800px;
  margin: 0 auto;
}

.error-code {
  font-size: 96px;
  font-weight: bold;
  color: #41a4fd;
  margin-bottom: 20px;
}

.error-message {
  font-size: 24px;
  margin-bottom: 20px;
}

.error-subtext {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 40px;
}

.btn-home {
  display: inline-block;
  background-color: #41a4fd;
  color: #fff;
  font-weight: bold;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-home:hover {
  background-color: #2c90e8;
}

/* ▶︎ Responsive */
@media screen and (max-width: 768px) {
  .error-code {
    font-size: 64px;
  }

  .error-message {
    font-size: 20px;
  }

  .error-subtext {
    font-size: 15px;
  }
}
@charset "UTF-8";
.kv-animation-elem {
  will-change: transform, animation, opacity;
}
.kv-animation-elem.kv-animation-end {
  will-change: auto;
}

.top-sec#culture,
.top-sec#faq {
  padding-top: clamp(0px, 5.1388888889vw, 103.6px);
  padding-bottom: clamp(0px, 12.3611111111vw, 249.2px);
  background: #FBC400;
}

/* -----------------------------
@map flip-card
----------------------------- */
.flip-card-grp._1 {
  -webkit-transform: translate3d(0, 0, 10px);
  transform: translate3d(0, 0, 10px);
}

.flip-card {
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: 1000ms ease-in-out;
  transition-delay: 200ms;
}
.flip-card._2 {
  transition-delay: 400ms;
}
.flip-card.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.flip-card.show.front {
  -webkit-transform: translate3d(0, 0, 5px);
  transform: translate3d(0, 0, 5px);
}

.card-person .img {
  -webkit-transform: translate3d(0, 0, 5px);
  transform: translate3d(0, 0, 5px);
}

/* -----------------------------
@map Lead text
----------------------------- */
#KV .lead-text {
  opacity: 0;
  transform: translate(-50px, 0px);
  transition-duration: 1500ms;
  transition-timing-function: cubic-bezier(0, 0, 0, 1);
  transition-delay: 1000ms;
}
#KV .lead-text.run {
  opacity: 1;
  transform: translate(0px, 0px) !important;
  will-change: transform, opacity;
}
#KV .lead-text._2 {
  transform: translate(-30px, 0px);
  transition-timing-function: ease-in-out;
  transition: 1000ms;
  transition-delay: 1500ms;
}

/* -----------------------------
@map SVG path
----------------------------- */
:root {
  --stroke-dasharray: 0;
  --stroke-dashoffset: 0;
}

/*
@note ラインパス
*/
.na {
  display: none;
}

.pen-animation {
  width: pc(405);
  height: pc(116);
  --stroke-dasharray: 472px;
  --stroke-dashoffset: 472px;
}
.pen-animation.run {
  --stroke-dashoffset: 0px;
}

svg.line-path {
  width: 100%;
  height: auto;
}
svg.line-path image {
  width: 100%;
  height: 100%;
}
svg.line-path path {
  stroke-width: 4px;
  isolation: isolate;
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: var(--stroke-dashoffset);
  transition: 1000ms ease-in-out;
}

/*
@note テキストパス
*/
.identity-txt {
  width: pc(351);
  height: pc(211);
  overflow: visible;
  --stroke-dasharray: 1695px;
  --stroke-dashoffset: 1695px;
  -webkit-transform: translate3d(0, 0, 11px);
  transform: translate3d(0, 0, 11px);
}
.identity-txt.run {
  --stroke-dashoffset: 0px;
}
.identity-txt svg.text-path {
  width: 100%;
  height: auto;
}
.identity-txt svg.text-path image {
  width: 100%;
  height: 100%;
}
.identity-txt svg.text-path path {
  stroke-width: 12px;
  isolation: isolate;
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: var(--stroke-dashoffset);
  transition: 2000ms ease-in-out;
}

/*
@note = = KVのアニメーション
*/
@keyframes KV-flip-card-1 {
  0% {
    transform: rotateY(1deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@keyframes KV-flip-card-2 {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
:root {
  --kv-flip-duration:1000ms;
  --kv-flip-dellay:0ms;
  --iteration: 1;
}

.flip-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  --kv-flip-animation: KV-flip-card-1 var(--kv-flip-duration) var(--kv-flip-dellay) ease-in both var(--iteration);
}
.flip-card._2 {
  --kv-flip-dellay:300ms;
  --kv-flip-animation: KV-flip-card-1 var(--kv-flip-duration) var(--kv-flip-dellay) ease-in both var(--iteration);
}
.flip-card.moveout {
  --kv-flip-animation: KV-flip-card-2 var(--kv-flip-duration) var(--kv-flip-dellay) ease-out both var(--iteration);
  --kv-flip-dellay:0ms !important;
}
.flip-card.moveout .kv-animation-elem {
  animation-delay: 0ms !important;
}

.card-person {
  animation: var(--kv-flip-animation);
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  animation-play-state: paused;
}
.card-person img {
  transform: translate3d(0, 0, 1px);
}
.card-person img {
  backface-visibility: hidden !important;
}
.card-person.moveout {
  animation: var(--kv-flip-animation-2);
  backface-visibility: hidden !important;
}
.run .card-person {
  animation-play-state: running;
  will-change: transform, animation, opacity;
}
.card-person ._2 {
  display: none;
}
.card-person[data-count="2"] ._1, .card-person[data-count="3"] ._1 {
  display: none;
}
.card-person[data-count="2"] ._2, .card-person[data-count="3"] ._2 {
  display: block;
}
.card-person .back {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.card-bg {
  animation: var(--kv-flip-animation);
  animation-play-state: paused;
  transform-style: preserve-3d;
  overflow: visible;
}
.card-bg.cover {
  z-index: 3 !important;
}
.card-bg .perspective {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotateY(90deg);
}
.card-bg.moveout {
  animation: var(--kv-flip-animation-2);
}
.run .card-bg {
  animation-play-state: running;
}




/* ------------------------------------------
   Reset
------------------------------------------ */
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, font, 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;
  font-style: normal;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
}

* {
  outline: none;
}

body {
  line-height: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

blockquote {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th {
  text-align: left;
}

a:focus {
  outline: none;
}

a img {
  border: none;
}

input, button, select, textarea {
  border-radius: 0;
}

@media screen and (max-width: 767px) {
  input, button, select, textarea {
    -webkit-appearance: none;
  }
}
body.showBlk * {
  background-color: rgba(255, 0, 0, 0.2);
}

body.showBlk * * {
  background-color: rgba(0, 255, 0, 0.2);
}

body.showBlk * * * {
  background-color: rgba(0, 0, 255, 0.2);
}

body.showBlk * * * * {
  background-color: rgba(255, 0, 255, 0.2);
}

body.showBlk * * * * * {
  background-color: rgba(0, 255, 255, 0.2);
}

body.showBlk * * * * * * {
  background-color: rgba(255, 255, 0, 0.2);
}

body.showBlk * * * * * * * {
  background-color: rgba(255, 0, 0, 0.2);
}

body.showBlk * * * * * * * * {
  background-color: rgba(0, 255, 0, 0.2);
}

body.showBlk * * * * * * * * * {
  background-color: rgba(0, 0, 255, 0.2);
}

:root {
  --rpx: 0.0694444444vw ;
  --rpxClamp: clamp(0px, var(--rpx), 1.4px);
}
@media screen and (max-width: 767px) {
  :root {
    --rpx: 0.2666666667vw ;
  }
}

/* -----------------------------
@map 繧ｫ繧ｹ繧ｿ繝�螟画焚
----------------------------- */
:root {
  --max-width: clamp(0px, 69.4444444444vw, 1400px);
  /* 驟崎牡 */
  --color-accent: #95E1D7;
  --color-gray-bg: #E1E1E1;
  --color-gray-mig-bg: #F5F2F2;
  --color-gray-lite-bg: #f4f4f4;
  --color-brown: #7A6151;
  --color-black-text: #0E1A19;
  --color-gray-hairline: #AAAAAA;
  --color-gray-hairline-lite: #E8E8E8;
  --color-white: #FFFFFF;
  --color-unnamed-color-5f5e5e: #5F5E5E;
  --color-section-header-en:var(--color-accent);
  --color-placeholder-text:#CECECE;
  /* 莠碁嚴螻､莉･髯� */
  /* 繝輔か繝ｳ繝� */
  --font-default: "Noto Sans JP",sans-serif;
  --font-ja: "Noto Sans JP",sans-serif;
  --font-en: century-gothic, sans-serif;
  --lineheight-adjust-notosansjp: 0.745em;
  --top-adjust-notosansjp: -0.0745em;
  /* 繝医Λ繝ｳ繧ｸ繧ｷ繝ｧ繝ｳ */
  --cta-transition-default: 200ms ease-out;
  /* 隗剃ｸｸ */
  --round-size: clamp(0px, 2.0833333333vw, 42px);
  --round-size-mid: clamp(0px, 1.3888888889vw, 28px);
  --round-size-small: clamp(0px, 0.6944444444vw, 14px);
  /* 繝懊�繝€繝ｼ */
  --border-dashed: 0.5px dashed #AAAAAA;
  /* gnavi繝倥ャ繝€繝ｼ */
  --header-height: clamp(0px, 2.5vw, 50.4px);
  --header-total-height: clamp(0px, 7.0833333333vw, 142.8px);
  --header-margin: clamp(0px, 2.2916666667vw, 46.2px) clamp(0px, 2.7777777778vw, 56px);
  --header-cta-gap: clamp(0px, 2.7777777778vw, 56px);
  /* 繝壹�繧ｸ繝輔ャ繧ｿ繝ｼ */
  --page-footer-height: clamp(0px, 39.5833333333vw, 798px);
  /* 繝輔ャ繧ｿ繝ｼ */
  --footer-padding: clamp(0px, 6.9444444444vw, 140px) 0;
  /* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ */
  --section-padding-top:clamp(0px, 9.7222222222vw, 196px);
  --section-padding-bottom: clamp(0px, 10.4166666667vw, 210px);
  /* 莠碁嚴螻､莉･髯� */
  /* 譛ｬ譁� */
  --text-content-fz-large: clamp(0px, 2.2222222222vw, 44.8px);
  --text-content-fz-mid: clamp(0px, 1.3888888889vw, 28px);
  --text-content-fz: clamp(0px, 1.1111111111vw, 22.4px);
}
@media screen and (max-width: 767px) {
  :root {
    --max-width: 100%;
  }
}
:root .recruit-secondary-page {
  --color-page-bg: #F5F2F2;
}
:root .recruit-secondary-page#recruit-benefit-systems, :root .recruit-secondary-page#recruit-faw {
  --color-page-bg: #fff;
}
@media screen and (max-width: 767px) {
  :root {
    --round-size: clamp(0px, 4vw, 21px);
    --round-size-mid: clamp(0px, 2.6666666667vw, 14px);
    --round-size-small: clamp(0px, 1.3333333333vw, 7px);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --header-height: clamp(0px, 6.4vw, 33.6px);
    --header-margin: clamp(0px, 5.3333333333vw, 28px) clamp(0px, 5.3333333333vw, 28px);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --page-footer-height: clamp(0px, 71.2vw, 373.8px);
    --page-footer-markie-height: clamp(0px, 34.4vw, 180.6px);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --footer-padding: 0;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --section-padding-top:clamp(0px, 18.6666666667vw, 98px);
    --section-padding-bottom: clamp(0px, 17.6vw, 92.4px);
  }
}
:root .recruit-secondary-page h2 {
  --section-title-fz-en: clamp(0px, 3.8888888889vw, 78.4px);
}
@media screen and (max-width: 767px) {
  :root .recruit-secondary-page h2 {
    --section-title-fz-en: clamp(0px, 8.5333333333vw, 44.8px);
  }
}
@media screen and (min-width: 768px) {
  :root .recruit-secondary-page {
    --section-padding-v: clamp(0px, 11.1111111111vw, 224px);
  }
}
@media screen and (max-width: 767px) {
  :root .recruit-secondary-page {
    --section-padding-v-top: clamp(0px, 10.6666666667vw, 56px);
    --section-padding-v-bottom: clamp(0px, 16vw, 84px);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --text-content-fz-large: clamp(0px, 4.8vw, 25.2px);
    --text-content-fz-mid: clamp(0px, 1.3888888889vw, 28px);
    --text-content-fz: clamp(0px, 3.7333333333vw, 19.6px);
  }
}

/* -----------------------------
@map 繝代�繝�
----------------------------- */
/* 
@note 繝懊ち繝ｳ 
*/
.btn-cta {
  --color: var(--color-black-text);
  --bg-bolor: #000;;
  --border-color: #FFF;
  --hover-color:#FFF ;
  --hover-bg-bolor:#000;;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-en);
  transition: var(--cta-transition-default);
  height: 100%;
  width: clamp(0px, 9.1666666667vw, 184.8px);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  background: var(--bg-bolor);
}
.btn-cta:hover {
  --color: var(--hover-color);
  --bg-bolor: var(--hover-bg-bolor);
  --border-color: var(--color-black-text) ;
}
.btn-cta span {
  font-weight: 500;
  color: #FFF;
  font-size: clamp(0px, 1.1111111111vw, 22.4px);
}

.btn-wrap {
  margin-top: clamp(0px, 3.4722222222vw, 70px) !important;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(0px, 0.5555555556vw, 11.2px);
  --this-border-transform:translateY(clamp(0px, 0.5555555556vw, 11.2px)) scale(0, 1);
}
@media screen and (max-width: 767px) {
  .btn-link {
    gap: clamp(0px, 2.1333333333vw, 11.2px);
  }
}
.btn-link:hover, .btn-link:focus, .btn-link:active {
  --this-border-transform:translateY(clamp(0px, 0.5555555556vw, 11.2px)) scale(1, 1);
}
.btn-link span {
  font-size: clamp(0px, 1.25vw, 25.2px);
  color: var(--color-black-text);
}
@media screen and (max-width: 767px) {
  .btn-link span {
    font-size: clamp(0px, 4.2666666667vw, 22.4px);
    color: #262727;
  }
}
.btn-link span:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: var(--color-black-text);
  transform: var(--this-border-transform);
  transition: 300ms;
  transform-origin: 0% 0%;
}

.btn-rect {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-Zen-Maru-Gothic);
  background: #fff;
  height: 80px;
  border-radius: var(--btn-rect-radius);
  flex-grow: 1;
  transition: var(--cta-transition-default);
}
@media screen and (max-width: 767px) {
  .btn-rect {
    border-radius: clamp(0px, 2.6666666667vw, 14px);
    height: clamp(0px, 16vw, 84px);
  }
}
.btn-rect span {
  font-weight: 500 !important;
  font-size: var(--btn-rect-fz);
  color: var(--color-brown);
  display: block;
}
.btn-rect:hover {
  background-color: var(--color-accent);
}
.btn-rect:hover span {
  color: #fff;
}

.btn-circle-anchor {
  display: block;
  --btn-circle-size: clamp(0px, 2.7777777778vw, 56px);
  --btn-circle-anchor-size: clamp(0px, 0.5555555556vw, 11.2px);
  cursor: pointer;
  width: var(--btn-circle-size);
  height: var(--btn-circle-size);
  background: var(--btn-circle-bg-color);
  border-radius: 100%;
  border: 1px solid var(--btn-circle-border-color);
  position: relative;
}
.btn-circle-anchor.left {
  transform: rotate(90deg);
}
.btn-circle-anchor.right {
  transform: rotate(-90deg);
}
@media screen and (max-width: 767px) {
  .btn-circle-anchor {
    --btn-circle-size: clamp(0px, 10.6666666667vw, 56px);
    --btn-circle-anchor-size: clamp(0px, 2.1333333333vw, 11.2px);
  }
}
.btn-circle-anchor:before {
  content: "";
  display: block;
  width: var(--btn-circle-anchor-size);
  height: var(--btn-circle-anchor-size);
  inset: -10% 0 0 0;
  position: absolute;
  margin: auto;
  transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0);
  border: 1px solid var(--btn-circle-inner-color);
  border-width: 0 0 1px 1px;
}
.btn-circle-anchor:hover:before {
  border-color: #fff;
}

.btn-circle-close {
  cursor: pointer;
  --btn-circle-size: clamp(0px, 4.1666666667vw, 84px);
  width: var(--btn-circle-size);
  height: var(--btn-circle-size);
  background: #fff;
  border-radius: 100%;
  border: 1px solid var(--color-accent);
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--color-accent);
}
@media screen and (max-width: 767px) {
  .btn-circle-close {
    --btn-circle-size: clamp(0px, 10.6666666667vw, 56px);
    font-size: clamp(0px, 3.2vw, 16.8px);
  }
}
.btn-circle-close:hover {
  background: var(--color-accent);
  color: #fff;
}

/*
@note 繧｢繝ｭ繝ｼ
*/
:root {
  --arrow-size:clamp(0px, 3.75vw, 75.6px);
  --arrow-bg-color: #fff;
  --arrow-inner-color: var(--color-black-text);
  --arrow-transform: translateX(0%);
  --arrow-transition: 300ms;
}
@media screen and (max-width: 767px) {
  :root {
    --arrow-size: clamp(0px, 11.2vw, 58.8px);
  }
}

.arrow {
  width: var(--arrow-size);
  height: var(--arrow-size);
  background:#000;
  --arrow-transform: translateX(0%);
  border-radius: 100%;
  transition: var(--arrow-transition);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;


  
  color: #FFF !important;
}
@media screen and (min-width: 768px) {
  a:hover .arrow, .arrow:hover {
    --arrow-bg-color: var(--color-black-text);
    --arrow-inner-color: #fff;
    --arrow-transform: translateX(30%);
  }
}
@media screen and (max-width: 767px) {
  a:active .arrow, .arrow:active {
    --arrow-bg-color: var(--color-black-text);
    --arrow-inner-color: #fff;
    --arrow-transform: translateX(30%);
  }
}
.arrow:before {
  color: var(--arrow-inner-color);
  transform: var(--arrow-transform);
  transition: var(--arrow-transition);
  font-size: calc(var(--arrow-size) * 0.17);
}

.arrow i{
  color: #FFF;
}

@media screen and (max-width: 767px) {
  .arrow:before {
    font-size: calc(var(--arrow-size) * 0.19);
  }
}

/* -----------------------------
@map 蜈ｨ闊ｬ
----------------------------- */
html {
  font-size: clamp(0px, 0.6944444444vw, 14px);
  font-family: var(--font-default);
}
@media screen and (max-width: 767px) {
  html {
    font-size: clamp(0px, 2.6666666667vw, 14px);
  }
}
@media screen and (max-width: 767px) {
  html.noscroll {
    overflow: hidden;
  }
}

body {
  margin: 0;
  font-size: 1.6rem;
  color: var(--color-black-text);
  font-family: var(--font-default);
  background: #fff;
}
body * {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: var(--color-black-text);
}
a.na {
  pointer-events: none;
}
a:hover:not(.btn-link) {
  color:#000;
  opacity: 0.7;
}
a:hover .img img, .img a:hover img {
  transform: scale(1.05);
}
@media screen and (min-width: 768px) {
  a.pc-na {
    pointer-events: none;
    display: block;
  }
}

p {
  font-size: 1.6rem;
  text-align: justify;
  line-height: 1.8;
  font-weight: 300;
}
@media screen and (max-width: 767px) {
  p {
    font-size: 1.3rem;
  }
}

.ja {
  font-family: var(--font-ja);
  font-weight: 400;
}

.en {
  font-family: var(--font-en);
  font-weight: 400;
}

.stretch {
  width: 100%;
  text-align: justify;
  text-align-last: justify;
}

p.click-note {
  text-align: right;
}
@media screen and (max-width: 767px) {
  p.click-note {
    font-size: clamp(0px, 3.2vw, 16.8px);
  }
}

.img {
  overflow: hidden;
}
.img img:not(.static, .js-static-size) {
  display: block;
  transition: var(--cta-transition-default);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}
/*
@note 繝�く繧ｹ繝医Μ繝ｳ繧ｯ
*/
.ar {
  text-align: right;
}

main {
  overflow: hidden;
}

/* -----------------------------
@map 隕句�縺�
----------------------------- */
:root {
  --header-color: var(--color-accent);
}

.section-title {
  --title-fz-en: clamp(0px, 6.6666666667vw, 134.4px);
  --title-fz-ja: clamp(0px, 1.6666666667vw, 33.6px);
  --title-gap: clamp(0px, 0vw, 0px);
  --title-color: var(--color-black-text);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  display: inline-flex;
  line-height: 1;
  gap: var(--title-gap);
  color: var(--title-color);
}
@media screen and (max-width: 767px) {
  .section-title {
    --title-fz-en: clamp(0px, 16vw, 84px);
    --title-fz-ja: clamp(0px, 3.4666666667vw, 18.2px);
  }
}
.section-title.M {
  --title-fz-en: clamp(0px, 5vw, 100.8px);
  --title-fz-ja: clamp(0px, 1.1111111111vw, 22.4px);
  --title-gap: clamp(0px, 0.625vw, 12.6px);
}
@media screen and (max-width: 767px) {
  .section-title.M {
    --title-fz-en: clamp(0px, 10.6666666667vw, 56px);
    --title-fz-ja: clamp(0px, 3.4666666667vw, 18.2px);
    --title-gap: sp(4);
  }
}
.section-title.S {
  --title-fz-en: clamp(0px, 3.8888888889vw, 78.4px);
  --title-fz-ja: clamp(0px, 1.1111111111vw, 22.4px);
  --title-gap: clamp(0px, 0.3472222222vw, 7px);
}
@media screen and (max-width: 767px) {
  .section-title.S {
    --title-fz-en: clamp(0px, 9.6vw, 50.4px);
    --title-fz-ja: clamp(0px, 3.4666666667vw, 18.2px);
    --title-gap: clamp(0px, 0.8vw, 4.2px);
  }
}
.section-title.S.ja {
  --title-fz-ja: calc(32 * var(--rpxClamp));
  --title-fz-en: calc(16 * var(--rpxClamp));
  --header-color: var(--color-black-text);
}
.section-title.S.ja .ja {
  line-height: 1.4375;
}
@media screen and (max-width: 767px) {
  .section-title.S.ja {
    --title-fz-ja: calc(20 * var(--rpxClamp));
    --title-fz-en: calc(12 * var(--rpxClamp));
  }
}
.section-title.SS {
  --title-fz-en: clamp(0px, 3.3333333333vw, 67.2px);
  --title-fz-ja: clamp(0px, 1.1111111111vw, 22.4px);
  --title-gap: clamp(0px, 0.3472222222vw, 7px);
}
@media screen and (max-width: 767px) {
  .section-title.SS {
    --title-fz-en: clamp(0px, 9.6vw, 50.4px);
    --title-fz-ja: clamp(0px, 3.4666666667vw, 18.2px);
    --title-gap: clamp(0px, 0.8vw, 4.2px);
  }
}
.section-title.W {
  --title-color: #fff;
}
.section-title.center {
  display: flex;
}
.section-title.center span {
  width: auto;
}
.section-title span {
  width: 100%;
}
.section-title span i {
  display: block;
}
.section-title .en {
  font-weight: normal;
  font-size: var(--title-fz-en);
  line-height: 1.22;
  color: var(--header-color);
}
.section-title .ja {
  font-size: var(--title-fz-ja);
  line-height: 1;
}
.section-title .ja i {
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .header-cheers {
    font-size: calc(26 * var(--rpxClamp));
    gap: calc(25 * var(--rpxClamp));
  }
}
@media screen and (min-width: 768px) {
  .header-cheers .en {
    height: clamp(0px, 2.7083333333vw, 54.6px);
  }
}
@media screen and (min-width: 768px) {
  .header-cheers .ja {
    height: clamp(0px, 1.6666666667vw, 33.6px);
  }
}

/* -----------------------------
@map 繝ｪ繧ｹ繝�
----------------------------- */
:root {
  --card-list-gap:clamp(0px, 2.0833333333vw, 42px);
}

.card-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(auto);
  gap: var(--card-list-gap);
  --btn-circle-border-color:var(--color-black-text);
}
@media screen and (max-width: 767px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}
.card-list li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: clamp(0px, 1.9444444444vw, 39.2px);
}
@media screen and (max-width: 767px) {
  .card-list li {
    width: 100%;
    gap: clamp(0px, 2.1333333333vw, 11.2px);
  }
}
.card-list li hgroup {
  display: block;
  align-items: center;
  grid-template-columns: 1fr auto;
}
.card-list li h3 {
  font-size: clamp(0px, 1.6666666667vw, 25.6px);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: clamp(0px, 0.5555555556vw, 11.2px);
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .card-list li h3 {
    gap: clamp(0px, 1.3333333333vw, 7px);
    font-size: clamp(0px, 4.8vw, 25.2px);
  }
}
.card-list li h3 * {
  width: 100%;
}
.card-list li h3 span {
  display: block;
  font-weight: bolder;
}
.card-list li h3 .sub {
  font-size: clamp(0px, 1.1111111111vw, 22.4px);
}
@media screen and (max-width: 767px) {
  .card-list li h3 .sub {
    font-size: clamp(0px, 3.2vw, 16.8px);
  }
}
.card-list li i.arrow {
  border: 0.5px solid var(--btn-circle-border-color);
}

/* -----------------------------
@map 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
----------------------------- */
/*
@note scroll 繧｢繝ｳ繧ｫ繝ｼ縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
*/
@keyframes scroll-anchor {
  0% {
    left: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 100%;
  }
}
/* 
@note 隕∫ｴ�縺ｮinvew繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
 */
:root {
  --inview-animation-start: scale(.97) translate(0, 50px);
  --inview-animation-end: scale(1) translate(0, 0);
  --inview-animation-transition: opacity 1s ease-out, transform 1000ms ease-out;
}
@media screen and (max-width: 767px) {
  :root {
    --inview-animation-start: scale(.97) translate(0, 50px);
  }
}

.inview-animate-once {
  opacity: 0;
  transform: var(--inview-animation-start);
  transition: var(--inview-animation-transition);
}
@media screen and (max-width: 767px) {
  .inview-animate-once {
    transition-delay: 0s !important;
  }
}
.inview-animate-once.no-delay {
  transition-delay: 0s !important;
}
.inview-animate-once.inview-0 {
  opacity: 1;
  transform: var(--inview-animation-end);
}
.inview-animate-once.inview-0 + .inview-animate-once {
  transition-delay: 100ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once {
  transition-delay: 200ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 300ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 400ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 500ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 600ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 700ms;
}
.inview-animate-once.inview-0 + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once + .inview-animate-once {
  transition-delay: 800ms;
}


.interview-index {
  position: absolute;
  z-index: 2;
  top: clamp(0px, 3.6111111111vw, 72.8px);
  right: clamp(0px, 9.0277777778vw, 182px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-weight: bold;
  width: clamp(0px, 4.3055555556vw, 86.8px);
  width: auto;
  color: var(--color-gray-hairline);
}

.top-sec#people .card-list .img .interview-index .number {
  font-size: clamp(0px, 3.3333333333vw, 67.2px);
}


.top-sec#people .card-list .img .interview-index {
  z-index: 2;
  width: clamp(0px, 3.75vw, 75.6px);
  top: clamp(0px, 1.3888888889vw, 28px);
  right: clamp(0px, 1.3888888889vw, 28px);
  transform: none;
  color: var(--color-accent);
}

.top-sec#people .card-list .img .interview-index .number {
  font-size: clamp(0px, 3.3333333333vw, 67.2px);
}

.interview-index .number::before {
  counter-increment: number 1;
  content: counter(number, decimal-leading-zero) " ";
}


.interview-index .number::before {
  counter-increment: number 1;

  content: counter(number, decimal-leading-zero) " ";

}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list .img .interview-index .number {
    font-size: clamp(0px, 9.533333vw, 65.8px);
    font-weight: bolder;
  }
}

/*
@note 繝�繝ｼ繝薙�蜀咲函繝懊ち繝ｳ縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
*/
@keyframes rotate-playbutton {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
/*
@note 繝�繝ｼ繝薙�閭梧勹縺ｮ繧ｺ繝ｼ繝�繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
*/
@keyframes zoom-movie-bg {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}
/* @note 莨夂､ｾ繧堤衍繧九�繝ｼ繧ｭ繝ｼ */
:root {
  --slide-w: clamp(0px, 40.8333333333vw, 823.2px);
}
@media screen and (max-width: 767px) {
  :root {
    --slide-w: clamp(0px, 83.7333333333vw, 439.6px);
  }
}

@keyframes company-slide-markie {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--slide-w) * -4));
  }
}
/* 繝壹�繧ｸ繝輔ャ繧ｿ繝ｼ縺ｮ繝槭�繧ｭ繝ｼ */
@keyframes page-footer-slide-markie {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: calc(clamp(0px, 128.3333333333vw, 2587.2px)*-4) 0;
  }
}
@media screen and (max-width: 767px) {
  @keyframes page-footer-slide-markie {
    from {
      background-position: 0% 0%;
    }
    to {
      background-position: calc(clamp(0px, 80.8vw, 424.2px)*-4) 0;
    }
  }
}
/* -----------------------------
@map 繝｢繝ｼ繝€繝ｫ繧ｦ繧｣繝ｳ繝峨え
----------------------------- */
div.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #eee;
  display: grid;
  place-content: center;
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: 500ms;
}
div.modal:target {
  pointer-events: auto;
  opacity: 1;
}
div.modal:target .inner {
  opacity: 1;
  transform: translateY(0);
}
div.modal:target iframe {
  display: block !important;
}
div.modal .inner {
  position: relative;
  width: clamp(0px, 69.4444444444vw, 1400px);
  background: var(--color-black-text);
  transition: 1000ms cubic-bezier(0, 0.94, 0.58, 1) 500ms;
  opacity: 0;
  transform: translateY(50px);
}
@media screen and (max-width: 767px) {
  div.modal .inner {
    width: 100vw;
  }
}
div.modal .inner iframe {
  display: none;
  width: 100%;
  height: auto;
}
div.modal .inner .close {
  position: absolute;
  top: 0;
  right: clamp(-74px, -10.694vw, 0px);
}
@media screen and (min-width: 768px) {
  div.modal .inner .close {
    transform: translateX(100%);
  }
}
@media screen and (max-width: 767px) {
  div.modal .inner .close {
    right: clamp(0px, 2.6666666667vw, 14px);
    width: clamp(0px, 9.6vw, 50.4px);
    top: clamp(-14px, -2.6666666667vw, 0px);
    transform: translateY(-100%);
  }
  div.modal .inner .close img {
    width: 100% !important;
    height: auto !important;
  }
}

/* -----------------------------
@map 繝倥ャ繝€繝ｼ繝ｻ繧ｰ繝ｭ繝ｼ繝舌Ν繝翫ン
----------------------------- */


.site-logo {
  z-index: 11;
  pointer-events: auto;
  justify-self: flex-start;
  grid-column: 1;
  height: clamp(0px, 2.2222222222vw, 44.8px);
  gap: clamp(0px, 0.625vw, 12.6px);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: calc(33 * var(--rpxClamp));
  left: calc(40 * var(--rpxClamp));
  --webkit-mix-blend-mode: var(--brendmode);
  mix-blend-mode: var(--brendmode);
  color: #000;
}
@media screen and (max-width: 767px) {
  .site-logo {
    height: clamp(0px, 75.533vw, 33.8px);
    gap: clamp(0px, 3.667vw, 11px);
    top: calc(20 * var(--rpxClamp));
    left: calc(20 * var(--rpxClamp));
  }
}
.site-logo .logo {
  transition: 1000ms;
  width: clamp(0px, 10.8333333333vw, 218.4px);
  height: 100%;
  background-image: var(--header-site-logo-img);
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .site-logo .logo {
    width: clamp(0px, 302.4vw, 167.6px);
  }
}
.site-logo .logo.w {
  --header-site-logo-img: url(../img/global/b-site-logo-w@2x.png);
}
.site-logo .en {
  font-size: 14px;
  color: #000;
  letter-spacing: 0.05em;
  font-weight: 400;
  padding-top: 21px;
}
@media screen and (max-width: 767px) {
  .site-logo .en {
    font-size: 11px;
  }
}

.js-toggle-gnav {
  z-index: 11;
  --bar-scale: scale(50%, 100%);
  --this-text: "MENU";
  --this-color: #000;
  position: fixed;
  top: calc(33 * var(--rpxClamp));
  right: calc(40 * var(--rpxClamp));
  --webkit-mix-blend-mode: var(--brendmode);
  mix-blend-mode: var(--brendmode);
  pointer-events: auto;
  width: clamp(0px, 2.7777777778vw, 56px);
  height: var(--header-height);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  justify-content: flex-start;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .js-toggle-gnav {
    top: calc(12 * var(--rpxClamp));
    right: calc(20 * var(--rpxClamp));
  }
}
@media screen and (min-width: 768px) {
  .js-toggle-gnav:hover {
    --bar-scale: scale(100%, 100%);
  }
}
@media screen and (max-width: 767px) {
  .js-toggle-gnav {
    width: clamp(40px, 9.0666666667vw, 51.6px);
    height: 45px;
    padding: 6px;
    background: #FEE603;
  }
}
.js-toggle-gnav i {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: clamp(0px, 0.6944444444vw, 14px);
  justify-content: space-between;
  width: 100%;
  top: clamp(0px, 0.3472222222vw, 7px);
  position: relative;
}
@media screen and (max-width: 767px) {
  .js-toggle-gnav i {
    height: clamp(0px, 1.8666666667vw, 9.8px);
    top: 0;
  }
}
.js-toggle-gnav i:after, .js-toggle-gnav i:before {
  content: "";
  height: 1px;
  background: var(--this-color);
  width: 100%;
  transform-origin: left top;
  transition: 300ms;
}
.js-toggle-gnav i:after {
}
.js-toggle-gnav span {
  line-height: clamp(0px, 1.1805555556vw, 23.8px);
}
@media screen and (max-width: 767px) {
  .js-toggle-gnav span {
    line-height: 1.25;
  }
}
.js-toggle-gnav span:before {
  color: var(--this-color);
  content: var(--this-text);
  font-size: clamp(0px, 0.9722222222vw, 19.6px);
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
  font-weight: bold;
  font-family: var(--font-en);
  margin-top: auto;
  margin-bottom: 0;
  position: absolute;
  bottom: 3px;
  left: 0;
}
@media screen and (max-width: 767px) {
  .js-toggle-gnav span:before {
    font-size: clamp(0px, 3.2vw, 10.8px);
  }
}
.show-gnav .js-toggle-gnav {
  --this-text: "CLOSE";
  --this-color: #000;
  transition: 500ms;
  border-color: #000;
}
.show-gnav .js-toggle-gnav i {
  position: relative;
  transition: 300ms;
  top: clamp(0px, 0.5555555556vw, 11.2px);
}
@media screen and (max-width: 767px) {
  .show-gnav .js-toggle-gnav i {
    top: clamp(0px, 0.5333333333vw, 2.8px);
  }
}
.show-gnav .js-toggle-gnav i:after, .show-gnav .js-toggle-gnav i:before {
  transform-origin: center center;
  transform: rotateZ(19deg) !important;
  transition: 300ms;
  position: absolute;
}
.show-gnav .js-toggle-gnav i:after {
  transform: rotateZ(-19deg) !important;
}

#recruit-global-header .cta-container {
  pointer-events: auto;
  z-index: 3;
  mix-blend-mode: normal;
}
@media screen and (max-width: 767px) {
  #recruit-global-header .cta-container {
    display: none !important;
  }
}

.cta-container {
  display: block;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .cta-container {
    display: none;
  }
}
.cta-container .inner {
  height: var(--header-height);
  margin: var(--header-margin);
  display: grid;
  grid-template-columns: 1fr auto clamp(0px, 2.7777777778vw, 56px);
  align-items: center;
  justify-content: flex-start;
  gap: var(--header-cta-gap);
}
.cta-container .inner .btn-cta {
  grid-column: 2;
  pointer-events: auto;
}

/*
@note 繧ｰ繝ｭ繝ｼ繝舌Ν繝翫ン
*/
#global-navi {
  --this-color: #fff;
  position: fixed !important;
  top: 0;
  left: 0;
  height: 100dvh;
  background: #fff;
  width: 100vw;
  z-index: 5;
  pointer-events: none;
  /*
    @note 繝｡繝九Η繝ｼ
  */
}
.show-gnav #global-navi {
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  #global-navi {
    padding-top: clamp(0px, 18.6666666667vw, 98px);
    overflow-y: scroll;
    overscroll-behavior: contain;
    height: 100%;
  }
}
#global-navi .bg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background-image: url(../img/global/gnav-bg-img@3x.jpg);
  background-size: cover;
  background-position: top center;
}
@media screen and (max-width: 767px) {
  #global-navi .bg {
    position: fixed;
    background-image: url(../img/global/gnav-bg-img-sp@3x.jpg);
  }
}
#global-navi #gnavi-inner-placeholder {
  --menu-color: #fff;
  --menu-fz:clamp(0px, 1.1111111111vw, 22.4px);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(0px, 3.75vw, 75.6px) clamp(0px, 6.25vw, 126px);
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder {
    --menu-fz: clamp(0px, 3.4666666667vw, 18.2px);
  }
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
#global-navi #gnavi-inner-placeholder * {
  color: #FFF;
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder {
    width: 100%;
    padding: 0 clamp(0px, 5.3333333333vw, 28px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
}
#global-navi #gnavi-inner-placeholder .menu-list {
  font-size: var(--menu-fz);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(0px, 0.9027777778vw, 18.2px);
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder .menu-list .btn-circle-anchor {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .menu-list {
    gap: 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding: clamp(0px, 2.6666666667vw, 14px) 0 clamp(0px, 5.3333333333vw, 28px);
    transition: 1000ms cubic-bezier(0, 0.94, 0.58, 1);
    transition-delay: 0;
  }
  #global-navi #gnavi-inner-placeholder .menu-list:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder .menu-list li {
    width: 100%;
  }
}
#global-navi #gnavi-inner-placeholder .menu-list li a {
  display: block;
  line-height: 1.07;
  white-space: nowrap;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd {
  font-size: var(--menu-fz);
  margin-bottom: calc(clamp(0px, 1.875vw, 37.8px) - clamp(0px, 0.9027777778vw, 18.2px));
  overflow: hidden;
  position: relative;
  width: 100%;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd a {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  display: inline-flex;
  width: auto;
  gap: clamp(0px, 0.4861111111vw, 9.8px);
  transform: translateY(100%);
  transition: 1000ms cubic-bezier(0, 0.94, 0.58, 1);
  transition-delay: 0;
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .menu-list li.hd a {
    gap: clamp(0px, 1.3333333333vw, 7px);
  }
}
.show-gnav #global-navi #gnavi-inner-placeholder .menu-list li.hd a {
  transition-delay: 300ms !important;
  transform: translateY(0%);
  color: #000;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd a > * {
  width: 100%;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd .en {
  font-size: 2.5em;
  line-height: 1.25;
  font-weight: 400;
  color: #000;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd .ja {
  font-size: 1em;
  line-height: 1;
  font-weight: 500;
  color: #2D8E3B;
}
#global-navi #gnavi-inner-placeholder .menu-list li.hd .btn-circle-anchor {
  --btn-circle-size: clamp(0px, 8.5333333333vw, 44.8px);
  --btn-circle-bg-color: linear-gradient(90deg, rgba(65, 164, 253, 1), rgba(14, 244, 255, 1));;
  --btn-circle-anchor-size: 6px;
  --btn-circle-inner-color: #fff;
  position: absolute;
  top: clamp(0px, 3.2vw, 16.8px);
  right: 0;
  left: auto;
  bottom: 0;
  margin: auto;
}
#global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) {
  font-size: var(--menu-fz);
  transform: translateY(100%);
  opacity: 0;
  transition: 1000ms cubic-bezier(0, 0.94, 0.58, 1);
  transition-delay: 0;
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) {
    height: 0;
  }
  #global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) a {
    opacity: 0;
  }
}
.show-gnav #global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) {
  transition-delay: 600ms !important;
  transform: translateY(0%);
  opacity: 1;
  color: #000;
}
#global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) a {
  font-weight: 300;
  color: #000;
}
#global-navi #gnavi-inner-placeholder .menu-list li:not(.hd) a:before {
  content: "ー ";
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .menu-list.open {
    gap: 1.2em;
  }
}
#global-navi #gnavi-inner-placeholder .menu-list.open li:not(.hd) {
  height: auto;
}
#global-navi #gnavi-inner-placeholder .menu-list.open li:not(.hd) a {
  opacity: 1;
  transition: 500ms ease-in-out;
  transition-delay: 300ms;
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder .btn-entry-wrap {
    grid-column: 3/5;
  }
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .btn-entry-wrap {
    width: 100%;
    display: block;
    padding: clamp(0px, 10.6666666667vw, 56px) clamp(0px, 5.3333333333vw, 28px);
    height: auto;
  }
  #global-navi #gnavi-inner-placeholder .btn-entry-wrap a {
    width: 100%;
    height: clamp(0px, 29.6vw, 155.4px);
  }
}
#global-navi #gnavi-inner-placeholder .secondary_menu {
  font-size: var(--menu-fz);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0px, 1.25vw, 25.2px);
}
@media screen and (min-width: 768px) {
  #global-navi #gnavi-inner-placeholder .secondary_menu {
    grid-column: 1/3;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .secondary_menu {
    justify-content: center;
    grid-column: 1/3;
    order: 2;
    gap: 1em;
  }
}
#global-navi #gnavi-inner-placeholder .secondary_menu > * {
  width: 100%;
}
#global-navi #gnavi-inner-placeholder .secondary_menu .row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0px, 2.0833333333vw, 42px);
  justify-content: flex-start;
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .secondary_menu .row {
    gap: clamp(0px, 7.7333333333vw, 40.6px);
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  #global-navi #gnavi-inner-placeholder .secondary_menu .row a {
    font-size: clamp(0px, 3.2vw, 16.8px);
    color: #000;
  }
}
@media screen and (min-width: 768px) {
  global-navi #gnavi-inner-placeholder# .secondary_menu .row a {
    font-size: 0.75em;
    color: #000;
  }
  
  global-navi #gnavi-inner-placeholder# .secondary_menu #footer-site-logo {
  display: block;
  width: 100%;
}
  global-navi #gnavi-inner-placeholder# .secondary_menu #footer-site-logo .logo{
    margin-bottom: 15px;
    
  }
  
}
#global-navi #gnavi-inner-placeholder .secondary_menu address {
  font-size: 1em;
  font-weight: 400;
  color: #000;
}
#global-navi #gnavi-inner-placeholder .btn-entry-wrap,
#global-navi #gnavi-inner-placeholder .secondary_menu {
  transform: translateY(10%);
  opacity: 0;
  transition: 1000ms cubic-bezier(0, 0.94, 0.58, 1);
  transition-delay: 0;
}
.show-gnav #global-navi #gnavi-inner-placeholder .btn-entry-wrap,
.show-gnav #global-navi #gnavi-inner-placeholder .secondary_menu {
  opacity: 1;
  transition-delay: 900ms !important;
  transform: translateY(0%);
}

@media screen and (max-width: 767px) {
  .sns-link-wrap {
    position: relative;
    margin: clamp(0px, 5.3333333333vw, 28px) 0;
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    gap: 1em;
    width: 100%;
    justify-content: center !important;
  }
  .sns-link-wrap p {
    display: none;
  }
  .sns-link-wrap .sns-link {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    --icon-size: clamp(0px, 6.9333333333vw, 36.4px);
    gap: 1em;
  }
}

@media screen and (max-width: 767px) {
  address.sp {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    position: relative;
    z-index: 1;
    color: #000;
    text-align: center;
    margin-bottom: 36px;
  }
}

.btn-entry-wrap {
  width: clamp(0px, 32.6388888889vw, 658px);
  height: clamp(0px, 13.8888888889vw, 280px);
  --this-bg: var(--color-black-text);
  --this-brs: clamp(0px, 1.9444444444vw, 39.2px);
  --arrow-size: clamp(0px, 6.5972222222vw, 133px);
  --this-en-fz: clamp(0px, 5vw, 100.8px);
  --this-ja-fz: clamp(0px, 0.9722222222vw, 19.6px);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .btn-entry-wrap {
    height: clamp(0px, 29.6vw, 155.4px);
    --this-bg: #fff;
    --menu-color: var(--color-black-text);
    --this-brs: clamp(0px, 5.3333333333vw, 28px);
    --arrow-size: clamp(0px, 16vw, 84px);
    --this-en-fz: clamp(0px, 12vw, 63px);
    --this-ja-fz: clamp(0px, 2.4vw, 12.6px);
    --arrow-bg-color: var(--color-accent);
    --arrow-inner-color: #fff;
  }
}
.btn-entry-wrap .btn-entry {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--this-bg);
  border-radius: var(--this-brs);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.btn-entry-wrap .btn-entry:hover {
  --this-bg: #fff;
  --menu-color: var(--color-black-text);
  color: var(--color-black-text);
}
.btn-entry-wrap .btn-entry:hover .arrow {
  --arrow-bg-color:linear-gradient(90deg, rgba(65, 164, 253, 1), rgba(14, 244, 255, 1)) !important;
}
.btn-entry-wrap .btn-entry div {
  display: grid;
  grid-template-columns: auto auto;
  gap: clamp(0px, 1.5277777778vw, 30.8px);
  position: relative;
}
@media screen and (max-width: 767px) {
  .btn-entry-wrap .btn-entry div {
    gap: clamp(0px, 2.6666666667vw, 14px);
  }
}
.btn-entry-wrap .btn-entry div span {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--this-ja-fz) * 1.3);
}
@media screen and (max-width: 767px) {
  .btn-entry-wrap .btn-entry div span {
    gap: calc(var(--this-ja-fz) * 0.8);
    width: calc(127 * var(--rpxClamp));
  }
}
.btn-entry-wrap .btn-entry div .en {
  font-size: var(--this-en-fz);
  display: block;
  text-indent: -0.07em;
  line-height: 0.78;
  width: 100%;
  font-size: 38px;
  color: #000 !important;
}
.btn-entry-wrap .btn-entry div .ja {
  font-size: var(--this-ja-fz);
  display: block;
  white-space: nowrap;
  text-align-last: justify;
  width: 100%;
  font-size: 9px;
  color: #000 !important;
}

/*
@note 髢矩哩繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
*/
#global-navi {
  --translateX: translateX(0%);
  --translateX-menu: translateX(-50%);
  --easing: cubic-bezier(0.76, 0.04, 0.31);
  --transition: 500ms ease-in-out;
  --delay: 0ms;
  --opacity: 0;
  opacity: var(--opacity);
  transition: var(--transition);
}
@media screen and (max-width: 767px) {
  #global-navi {
    --transition: 600ms ease-in-out;
  }
}
.show-gnav #global-navi {
  --translateX: (0);
  --translateX-menu: 0;
  --opacity: 1;
}
#global-navi .bg {
  transform: var(--translateX);
  transition: var(--transition);
  opacity: var(--opacity);
}
@media screen and (max-width: 767px) {
  #global-navi .bg {
    height: 150vh;
  }
}

/* -----------------------------
@map 繝壹�繧ｸ繝輔ャ繧ｿ繝ｼ 
----------------------------- */
section#page-footer {
  height: var(--page-footer-height);
  background: #ccc;
  position: relative;
  display: grid;
  place-content: center;
}
section#page-footer .btn-entry-wrap {
  --this-bg: none;
}
section#page-footer a {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: grid;
  place-content: center;
}
section#page-footer .img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
section#page-footer .img:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  mix-blend-mode: multiply;
}
section#page-footer .img:after {
  content: "";
  transition: 300ms ease-in-out;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  ;
  mix-blend-mode: hard-light;
  transform: translateX(-100%);
  opacity: 0;
  background-image: linear-gradient(90deg, #ffe896, #fbc400);
}
section#page-footer .btn-entry-wrap {
  --this-en-fz:clamp(0px, 6.9444444444vw, 140px);
  --this-ja-fz: clamp(0px, 1.3888888889vw, 28px);
  --arrow-size: clamp(0px, 8.9583333333vw, 180.6px);
  --arrow-bg-color: var(--color-accent);
  --arrow-inner-color: #fff;
  transform: translateY(clamp(0px, 1.3888888889vw, 28px));
}
@media screen and (min-width: 768px) {
  section#page-footer .btn-entry-wrap .btn-entry {
    background: none;
  }
}
@media screen and (max-width: 767px) {
  section#page-footer .btn-entry-wrap {
    --arrow-bg-color: #fff;
    --arrow-inner-color: var(--color-black-text);
  }
  section#page-footer .btn-entry-wrap .btn-entry {
    --this-en-fz:clamp(0px, 13.8666666667vw, 72.8px);
    --this-ja-fz: clamp(0px, 2.9333333333vw, 15.4px);
    --arrow-size: clamp(0px, 14.4vw, 75.6px);
    background: none;
  }
  section#page-footer .btn-entry-wrap .btn-entry div {
    align-items: center;
  }
}
section#page-footer .btn-entry-wrap i {
  color: #fff;
}
@media screen and (min-width: 768px) {
  section#page-footer:hover .img:after {
    opacity: 1;
    transform: translateX(0);
  }
  section#page-footer:hover .btn-entry-wrap .arrow {
    --arrow-bg-color: #fff !important;
    --arrow-inner-color: var(--color-accent);
  }
}
section#page-footer:active .img:after {
  opacity: 1;
  transform: translateX(0);
}
section#page-footer:active .btn-entry-wrap .arrow {
  --arrow-bg-color: #fff !important;
  --arrow-inner-color: var(--color-accent);
}

/* -----------------------------
@map 繧ｵ繧､繝医ヵ繝�ち繝ｼ繝翫ン 
----------------------------- */
#recruit-footer-navi {
  background: #fff;
  padding: var(--footer-padding);
}
#recruit-footer-navi .inner {
  width: 100%;
}
@media screen and (min-width: 768px) {
  #recruit-footer-navi .inner {
    margin: 0 auto;
    width: clamp(0px, 83.3333333333vw, 1680px);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: clamp(0px, 2.4305555556vw, 49px);
  }
}
#recruit-footer-navi .inner > .row {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
}
#recruit-footer-navi .inner > .row > ._1,
#recruit-footer-navi .inner > .row > ._2 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    flex-direction: column-reverse;
  }
  #recruit-footer-navi .inner .row._2 .logo_wrap {
    padding: clamp(0px, 18.6666666667vw, 98px) 0 clamp(0px, 21.3333333333vw, 112px) 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0px, 4.8vw, 25.2px);
    width: 100%;
  }
  #recruit-footer-navi .inner .row._2 .logo_wrap #footer-site-logo {
    width: clamp(0px, 48vw, 252px);
    gap: clamp(0px, 1.8666666667vw, 9.8px);
  }
  #recruit-footer-navi .inner .row._2 .logo_wrap #footer-site-logo i {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
  }
  #recruit-footer-navi .inner .row._2 .logo_wrap .sns-link {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    --icon-size:clamp(0px, 8.5333333333vw, 44.8px);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: center;
    gap: 1em;
  }
  #recruit-footer-navi .inner .row._2 ._2 {
    display: none;
  }
}
#recruit-footer-navi .menu-list-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(0px, 3.4722222222vw, 70px);
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .menu-list-wrap {
    display: none;
  }
}
#recruit-footer-navi .menu-list-wrap ul {
  font-size: clamp(0px, 0.9722222222vw, 19.6px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
}
#recruit-footer-navi .menu-list-wrap ul .hd {
  margin-bottom: 0.5em;
}
#recruit-footer-navi .menu-list-wrap ul li {
  line-height: 1;
  width: 100%;
}
#recruit-footer-navi .menu-list-wrap ul .en {
  display: none;
}
#recruit-footer-navi .menu-list-wrap ul a {
  font-weight: 300;
  line-height: 1;
  display: block;
}
#recruit-footer-navi .ec-link-wrap {
  padding: clamp(0px, 2.7777777778vw, 56px) 0 clamp(0px, 2.4305555556vw, 49px) 0;
  background: var(--color-black-text);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #fff;
}
#recruit-footer-navi .ec-link-wrap .img {
  overflow: visible;
}
@media screen and (min-width: 768px) {
  #recruit-footer-navi .ec-link-wrap {
    border-radius: clamp(0px, 2.7777777778vw, 56px);
    width: clamp(0px, 26.875vw, 541.8px);
  }
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .ec-link-wrap {
    width: 100%;
    padding: 27px 0 30px 0;
  }
}
#recruit-footer-navi .ec-link-wrap * {
  color: #fff;
  font-weight: 300;
  text-align: center;
}
#recruit-footer-navi .ec-link-wrap p {
  width: 100%;
  font-size: clamp(0px, 0.9722222222vw, 19.6px);
  margin-bottom: 1em;
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .ec-link-wrap p {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
  }
}
#recruit-footer-navi .ec-link-wrap a {
  width: 50%;
  height: clamp(0px, 4.7222222222vw, 95.2px);
  border-right: 1px solid #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .ec-link-wrap a {
    height: clamp(0px, 15.7333333333vw, 82.6px);
  }
}
#recruit-footer-navi .ec-link-wrap a:last-of-type {
  border-right: none;
}
#recruit-footer-navi .ec-link-wrap a .img {
  height: clamp(0px, 1.875vw, 37.8px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: clamp(0px, 0.6944444444vw, 14px);
}
#recruit-footer-navi .ec-link-wrap a .img img {
  height: 100%;
  width: auto;
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .ec-link-wrap a .img {
    margin-bottom: clamp(0px, 1.0666666667vw, 5.6px);
    height: clamp(0px, 7.2vw, 37.8px);
  }
}
#recruit-footer-navi .ec-link-wrap a .img._2 img {
  max-height: 89%;
  width: auto;
}
#recruit-footer-navi .ec-link-wrap a i {
  width: 100%;
  display: block;
  font-size: clamp(0px, 0.8333333333vw, 16.8px);
}
@media screen and (max-width: 767px) {
  #recruit-footer-navi .ec-link-wrap a i {
    font-size: clamp(0px, 2.9333333333vw, 15.4px);
  }
}
#recruit-footer-navi #footer-site-logo {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: clamp(0px, 15.3472222222vw, 309.4px);
  gap: clamp(0px, 0.9027777778vw, 18.2px);
  margin-right: clamp(0px, 3.4722222222vw, 70px);
}
#recruit-footer-navi #footer-site-logo .logo {
  width: 100%;
}
#recruit-footer-navi #footer-site-logo .logo img {
  width: 100%;
  height: auto;
}
#recruit-footer-navi #footer-site-logo i {
  width: 100%;
  color: var(--color-black-text) !important;
  white-space: nowrap;
}
#recruit-footer-navi .sns-link {
  --this-color: var(--color-black-text);
  --icon-gap: clamp(0px, 1.1111111111vw, 22.4px);
  --icon-size:clamp(0px, 2.7777777778vw, 56px);
  flex-direction: row;
  width: auto;
}
#recruit-footer-navi .secondary_menu {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0px, 1.6666666667vw, 33.6px);
}
#recruit-footer-navi .secondary_menu .row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0px, 1.3888888889vw, 28px);
  align-items: center;
}
#recruit-footer-navi .secondary_menu .row a {
  font-size: clamp(0px, 0.8333333333vw, 16.8px);
}
#recruit-footer-navi .secondary_menu .row address {
  font-size: clamp(0px, 1.1111111111vw, 22.4px);
}


.kv-animation-elem {
  will-change: transform, animation, opacity;
}
.kv-animation-elem.kv-animation-end {
  will-change: auto;
}

/* -----------------------------
@map flip-card
----------------------------- */
.flip-card-grp._1 {
  -webkit-transform: translate3d(0, 0, 10px);
  transform: translate3d(0, 0, 10px);
}

.flip-card {
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  transition: 1000ms ease-in-out;
  transition-delay: 200ms;
}
.flip-card._2 {
  transition-delay: 400ms;
}
.flip-card.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.flip-card.show.front {
  -webkit-transform: translate3d(0, 0, 5px);
  transform: translate3d(0, 0, 5px);
}

.card-person .img {
  -webkit-transform: translate3d(0, 0, 5px);
  transform: translate3d(0, 0, 5px);
}

/* -----------------------------
@map Lead text
----------------------------- */
#KV .lead-text {
  opacity: 0;
  transform: translate(-50px, 0px);
  transition-duration: 1500ms;
  transition-timing-function: cubic-bezier(0, 0, 0, 1);
  transition-delay: 1000ms;
}
#KV .lead-text.run {
  opacity: 1;
  transform: translate(0px, 0px) !important;
  will-change: transform, opacity;
}
#KV .lead-text._2 {
  transform: translate(-30px, 0px);
  transition-timing-function: ease-in-out;
  transition: 1000ms;
  transition-delay: 1500ms;
}

/* -----------------------------
@map SVG path
----------------------------- */
:root {
  --stroke-dasharray: 0;
  --stroke-dashoffset: 0;
}

/*
@note 繝ｩ繧､繝ｳ繝代せ
*/
.na {
  display: none;
}

.pen-animation {
  width: clamp(0px, 28.125vw, 567px);
  height: clamp(0px, 8.0555555556vw, 162.4px);
  --stroke-dasharray: 472px;
  --stroke-dashoffset: 472px;
}
.pen-animation.run {
  --stroke-dashoffset: 0px;
}

svg.line-path {
  width: 100%;
  height: auto;
}
svg.line-path image {
  width: 100%;
  height: 100%;
}
svg.line-path path {
  stroke-width: 4px;
  isolation: isolate;
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: var(--stroke-dashoffset);
  transition: 1000ms ease-in-out;
}

/*
@note 繝�く繧ｹ繝医ヱ繧ｹ
*/
.identity-txt {
  width: clamp(0px, 24.375vw, 491.4px);
  height: clamp(0px, 14.6527777778vw, 295.4px);
  overflow: visible;
  --stroke-dasharray: 1695px;
  --stroke-dashoffset: 1695px;
  -webkit-transform: translate3d(0, 0, 11px);
  transform: translate3d(0, 0, 11px);
}
.identity-txt.run {
  --stroke-dashoffset: 0px;
}
.identity-txt svg.text-path {
  width: 100%;
  height: auto;
}
.identity-txt svg.text-path image {
  width: 100%;
  height: 100%;
}
.identity-txt svg.text-path path {
  stroke-width: 12px;
  isolation: isolate;
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: var(--stroke-dashoffset);
  transition: 2000ms ease-in-out;
}

/*
@note = = KV縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ
*/
@keyframes KV-flip-card-1 {
  0% {
    transform: rotateY(1deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@keyframes KV-flip-card-2 {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
:root {
  --kv-flip-duration:1000ms;
  --kv-flip-dellay:0ms;
  --iteration: 1;
}

.flip-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  --kv-flip-animation: KV-flip-card-1 var(--kv-flip-duration) var(--kv-flip-dellay) ease-in both var(--iteration);
}
.flip-card._2 {
  --kv-flip-dellay:300ms;
  --kv-flip-animation: KV-flip-card-1 var(--kv-flip-duration) var(--kv-flip-dellay) ease-in both var(--iteration);
}
.flip-card.moveout {
  --kv-flip-animation: KV-flip-card-2 var(--kv-flip-duration) var(--kv-flip-dellay) ease-out both var(--iteration);
  --kv-flip-dellay:0ms !important;
}
.flip-card.moveout .kv-animation-elem {
  animation-delay: 0ms !important;
}

.card-person {
  animation: var(--kv-flip-animation);
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  animation-play-state: paused;
}
.card-person img {
  transform: translate3d(0, 0, 1px);
}
.card-person img {
  backface-visibility: hidden !important;
}
.card-person.moveout {
  animation: var(--kv-flip-animation-2);
  backface-visibility: hidden !important;
}
.run .card-person {
  animation-play-state: running;
  will-change: transform, animation, opacity;
}
.card-person ._2 {
  display: none;
}
.card-person[data-count="2"] ._1, .card-person[data-count="3"] ._1 {
  display: none;
}
.card-person[data-count="2"] ._2, .card-person[data-count="3"] ._2 {
  display: block;
}
.card-person .back {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.card-bg {
  animation: var(--kv-flip-animation);
  animation-play-state: paused;
  transform-style: preserve-3d;
  overflow: visible;
}
.card-bg.cover {
  z-index: 3 !important;
}
.card-bg .perspective {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotateY(90deg);
}
.card-bg.moveout {
  animation: var(--kv-flip-animation-2);
}
.run .card-bg {
  animation-play-state: running;
}

/* -----------------------------
@map 繝医ャ繝励�繝ｼ繧ｸ
----------------------------- */
/*
@note 繝｡繧､繝ｳ繝薙ず繝･繧｢繝ｫ
*/
section#KV {
  height: 100vh;
  padding-top: var(--header-total-height);
  /* @note - - 繧ｭ繝｣繝�メ繝輔Ξ繝ｼ繧ｺ */
  /*
  @note - - 莠ｺ迚ｩ縺ｮ繧ｫ繝ｼ繝�
  */
  /*
  @note - - 繝壹Φ縺ｮ邱�
  */
  /*
  @note - - Identity
  */
  background: #FEE603;
}
@media screen and (max-width: 767px) {
  section#KV {
    padding-top: 0;
	height:108vh;
  }
}
section#KV > .inner {
  width: var(--max-width);
  position: relative;
  height: 100%;
  margin: 0 auto;
}
section#KV .catch {
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  section#KV .catch {
    height: auto;
    margin: 0 clamp(0px, 5.3333333333vw, 28px);
    padding-top: clamp(0px, 20.067vw, 89.6px);
  }
}
section#KV .catch .inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  section#KV .catch .inner {
    transform: translate(0, -14%);
  }
}
section#KV .catch p {
  font-weight: 500;
  width: 100%;
  letter-spacing: -0.01em;
}
@media screen and (max-width: 767px) {
  section#KV .catch p {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    line-height: 1.8462;
  }
    section#KV .catch p strong {
font-size: clamp(0px, 67.467vw, 18.2px);
  }
}
section#KV .catch ._1 {
  font-size: clamp(0px, 3.6944444444vw, 41.8px);
  line-height: 1.24em;
  margin-bottom: clamp(0px, 0.8333333333vw, 16.8px);
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  section#KV .catch ._1 {
    font-size: 24px;
    margin-bottom: clamp(0px, 104.4vw, 480.6px);
    line-height: 1.5;
    height: clamp(0px, 42.6666666667vw, 224px);
    font-weight: bold;
  }
  
  
section#KV .catch ._1 i {
  color: #2D8E3B;

  font-weight: bold;

  font-size: 36px !important;

}
}
section#KV .catch ._1 i {
  color: #2D8E3B;
  font-weight: bold;
  font-size: clamp(0px, 3.6944444444vw, 40.8px);
}
section#KV .flip-card-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  section#KV .flip-card-wrap {
    margin-left: clamp(0px, 23.625vw, 415.8px);
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap {
    justify-content: space-between;
    align-items: flex-start;
  }
}
section#KV .flip-card-wrap .flip-card-grp {
  min-width: clamp(0px, 26.3888888889vw, 532px);
  height: clamp(0px, 38.8888888889vw, 784px);
  background-size: cover;
  position: relative;
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap .flip-card-grp {
    width: clamp(0px, 49.6vw, 260.4px);
    height: clamp(0px, 73.3333333333vw, 385px);
  }
}
section#KV .flip-card-wrap .flip-card-grp .flip-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
section#KV .flip-card-wrap .flip-card-grp .flip-card.front {
  z-index: 1;
}
section#KV .flip-card-wrap .flip-card-grp .flip-card.back {
  z-index: 0;
}
section#KV .flip-card-wrap .flip-card-grp .card-person {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
section#KV .flip-card-wrap .flip-card-grp .card-bg {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1 !important;
}
section#KV .flip-card-wrap .flip-card-grp .img {
  position: absolute;
}
section#KV .flip-card-wrap .flip-card-grp._1 {
  z-index: 2;
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap .flip-card-grp._1 {
    position: relative;
    left: clamp(0px, 5.3333333333vw, 28px);
    top: 0;
    margin-top: clamp(0px, 73.8666666667vw, 387.8px);
  }
}
section#KV .flip-card-wrap .flip-card-grp._1 .img {
  width: 115%;
}
section#KV .flip-card-wrap .flip-card-grp._1 ._1 {
  bottom: 0;
  left: 0;
  z-index: 2;
}
section#KV .flip-card-wrap .flip-card-grp._1 ._2 {
  bottom: 0;
  left: 0;
  z-index: 1;
}
section#KV .flip-card-wrap .flip-card-grp._2 {
  z-index: 1;
}
@media screen and (min-width: 768px) {
  section#KV .flip-card-wrap .flip-card-grp._2 {
    left: clamp(-51.8px, -2.5694444444vw, 0px);
    top: clamp(-72.8px, -3.6111111111vw, 0px);
  }
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap .flip-card-grp._2 {
    position: relative;
    right: clamp(0px, 5.3333333333vw, 28px);
    top: 0;
    margin-top: clamp(0px, 60.0666666667vw, 215.6px);
  }
}
section#KV .flip-card-wrap .flip-card-grp._2 .img {
  width: 113%;
}
section#KV .flip-card-wrap .flip-card-grp._2 .img._1 {
  bottom: clamp(0px, 1.3888888889vw, 28px);
  left: clamp(-102.2px, -5.0694444444vw, 0px);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap .flip-card-grp._2 .img._1 {
    bottom: clamp(0px, 2.6666666667vw, 14px);
  }
}
section#KV .flip-card-wrap .flip-card-grp._2 .img._2 {
  bottom: clamp(0px, 1.3888888889vw, 28px);
  left: clamp(-91px, -4.5138888889vw, 0px);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#KV .flip-card-wrap .flip-card-grp._2 .img._2 {
    bottom: clamp(0px, 2.6666666667vw, 14px);
  }
}
section#KV .pen-animation {
  position: absolute;
  top: clamp(0px, 0.9722222222vw, 19.6px);
  left: clamp(-75.6px, -3.75vw, 0px);
  transform: translate(0, -100%) rotate(-1deg);
}
@media screen and (max-width: 767px) {
  section#KV .pen-animation {
    width: clamp(0px, 49.6vw, 260.4px);
    height: auto;
    left: clamp(-14px, -2.6666666667vw, 0px);
    top: clamp(0px, 2.1333333333vw, 11.2px);
  }
}
section#KV .pen-animation .img {
  width: clamp(0px, 28.0555555556vw, 565.6px);
}
section#KV .identity-txt {
  width: clamp(0px, 24.375vw, 491.4px);
  position: absolute;
  transform-origin: left top;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  section#KV .identity-txt {
    left: clamp(0px, 33.2638888889vw, 670.6px);
    top: calc(50% - clamp(0px, 0.8333333333vw, 16.8px));
  }
}
@media screen and (max-width: 767px) {
  section#KV .identity-txt {
    width: clamp(0px, 54.9333333333vw, 288.4px);
    height: auto;
    left: clamp(0px, 30.9333333333vw, 162.4px);
    bottom: clamp(0px, 2.6666666667vw, 14px);
  }
}
section#KV .identity-txt img {
  width: 100%;
  height: auto !important;
}

.scroll-anchor-wrap {
  position: absolute;
  top: 50%;
  left: clamp(0px, 8.3333333333vw, 168px);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(0px, 0.4861111111vw, 9.8px);
  transform-origin: left bottom;
  transform: rotate(90deg) translateX(clamp(0px, 0.8333333333vw, 16.8px));
}
@media screen and (max-width: 767px) {
  .scroll-anchor-wrap {
    gap: clamp(0px, 1.3333333333vw, 7px);
    top: clamp(0px, 136.2666666667vw, 715.4px);
    left: auto;
    right: clamp(-113.4px, -21.6vw, 0px);
  }
}
.scroll-anchor-wrap .en {
  font-size: clamp(0px, 0.9722222222vw, 19.6px);
}
@media screen and (max-width: 767px) {
  .scroll-anchor-wrap .en {
    font-size: clamp(0px, 2.9333333333vw, 15.4px);
  }
}
.scroll-anchor-wrap .bar-wrap {
  height: clamp(0px, 0.4861111111vw, 9.8px);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  .scroll-anchor-wrap .bar-wrap {
    height: clamp(0px, 1.3333333333vw, 7px);
  }
}
.scroll-anchor-wrap .bar {
  width: clamp(0px, 7.3611111111vw, 148.4px);
  height: 1px;
  background-color: var(--color-black-text);
  position: relative;
}
@media screen and (max-width: 767px) {
  .scroll-anchor-wrap .bar {
    width: clamp(0px, 21.6vw, 113.4px);
  }
}
.scroll-anchor-wrap .dot {
  width: clamp(0px, 0.4861111111vw, 9.8px);
  height: clamp(0px, 0.4861111111vw, 9.8px);
  background: var(--color-black-text);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .scroll-anchor-wrap .dot {
    width: clamp(0px, 1.3333333333vw, 7px);
    height: clamp(0px, 1.3333333333vw, 7px);
  }
}
.scroll-anchor-wrap.inview-10 .dot {
  animation: scroll-anchor 2s ease-in-out infinite;
  will-change: left;
}

:root {
  --this-color: var(--color-black-text);
  --icon-size: clamp(0px, 1.8055555556vw, 36.4px);
  --icon-gap: clamp(0px, 0.9027777778vw, 18.2px);
}

.sns-link-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .sns-link-wrap {
    position: absolute;
    z-index: 1;
    right: clamp(0px, 8.3333333333vw, 168px);
    bottom: clamp(0px, 5.0694444444vw, 102.2px);
    gap: clamp(0px, 0.9027777778vw, 18.2px);
    color: #000;
  }
}
@media screen and (max-width: 767px) {
  #KV .sns-link-wrap {
    justify-content: flex-end !important;
    padding: 0;
    padding-right: clamp(0px, 12vw, 63px);
    position: absolute;
    top: clamp(0px, 139.7333333333vw, 733.6px);
    z-index: 4;
    margin-top: 0;
  }
  #KV .sns-link-wrap p {
    display: none;
  }
}
.sns-link-wrap p i {
  white-space: nowrap;
  font-size: 1.2rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  letter-spacing: 0.05em;
  color: var(--this-color);
  letter-spacing: 0.05;
}
@media screen and (max-width: 767px) {
  .sns-link-wrap p i {
    gap: clamp(0px, 1.6vw, 8.4px);
  }
}
@media screen and (min-width: 768px) {
  .sns-link-wrap p i {
    font-size: 1.4rem;
    width: clamp(0px, 7.0833333333vw, 142.8px);
    height: clamp(0px, 1.3888888889vw, 28px);
    transform-origin: center center;
    color: #000;
  }
}
.sns-link-wrap p i:after {
  content: "";
  width: clamp(0px, 1.9444444444vw, 39.2px);
  height: 1px;
  background: #000;
  color: #000;
}
@media screen and (max-width: 767px) {
  .sns-link-wrap p i:after {
    width: 30px;
  }
}

@media screen and (min-width: 768px) {
  .sns-link {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--icon-gap);
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  #KV .sns-link {
    --icon-size: clamp(0px, 6.9333333333vw, 36.4px);
    --icon-gap: clamp(0px, 3.4666666667vw, 18.2px);
  }
}
.sns-link li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}
.sns-link li i {
  font-size: var(--icon-size);
  line-height: 1;
  color: #000;
}

/*
@note 隕句�縺�
*/
.top-section-title {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}


h2.top-section-title{
  /*! font-weight: bolder; */
}


.top-section-title .en {
  font-size: 20px;
  line-height: 1.2;
  color: #2D8E3B;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(5 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .top-section-title .en {
    font-size: clamp(0px, 4.2666666667vw, 22.4px);
  }
}
.top-section-title .en i {
  font-weight: bold;
}
.top-section-title .en:before {
  content: "";
  width: 0.65em;
  height: 1px;
  background:#2D8E3B;
}
.top-section-title .ja {
  font-size: 48px;
  line-height: 1.458;
  font-weight: bolder !important;
}
@media screen and (max-width: 767px) {
  .top-section-title .ja {
    font-size: clamp(0px, 4.8vw, 25.2px);
  }
}

/*
@note 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ
*/
.top-sec {
  position: relative;
}
.top-sec > .inner {
  width: var(--max-width);
  margin: 0 auto;
}
.top-sec hgroup + .lead {
  margin-top: 1em;
}
@media screen and (max-width: 767px) {
  .top-sec hgroup + .lead {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    margin-top: clamp(0px, 2.6666666667vw, 14px);
  }
}
.top-sec .card-list {
  margin-top: clamp(0px, 4.1666666667vw, 84px);
  --arrow-bg-color: var(--color-accent);
  --arrow-inner-color: #fff;
}
@media screen and (max-width: 767px) {
  .top-sec .card-list {
    margin-top: clamp(0px, 8vw, 42px);
  }
}
.top-sec .card-list i.arrow {
  border: none;
}
a:hover .top-sec .card-list i.arrow, .top-sec .card-list i.arrow:hover {
  --arrow-inner-color: var(--color-accent);
}

/*
@note 縺雁ｮ｢讒倥�~~ #lead
*/
.top-sec#lead {
  padding-top: clamp(0px, 7.1527777778vw, 144.2px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead {
    padding-top: clamp(0px, 10.1333333333vw, 53.2px);
  }
}
.top-sec#lead:after {
  content: "";
  width: 100%;
  height: clamp(0px, 66.625vw, 3540.6px);
  position: absolute;
  left: 0;
  top: clamp(-280px, -13.8888888889vw, 0px);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: -1;
  background: #FBC400;
}
@media screen and (max-width: 767px) {
  .top-sec#lead:after {
    height: clamp(0px, 249.133vw, 1541.2px);
  }
}
@media screen and (max-width: 767px) {
  .top-sec#lead:after {
    top: 0px;
  }
}
.top-sec#lead > .inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .top-sec#lead > .inner {
    height: clamp(0px, 70.4861111111vw, 811px);
    margin-bottom: clamp(0px, 7.7777777778vw, 156.8px);
  }
}
@media screen and (max-width: 767px) {
  .top-sec#lead > .inner {
    display: flex;
    flex-wrap: wrap;
  }
}
.top-sec#lead .lead-text {
  padding-top: clamp(0px, 7.0833333333vw, 142.8px);
  width: clamp(0px, 36.1111111111vw, 728px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .lead-text {
    order: 2;
    width: 100%;
    padding: 54px 20px 74px 20px;
    text-align: right;
    color: #262727;
    font-weight: bold;
  }
  .top-sec#lead .lead-text p {
    margin-top: -0.25em;
    margin-bottom: -0.25em;
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    font-weight: normal;
  }
}
.top-sec#lead .lead-text h2 {
  font-size: clamp(0px, 2.2222222222vw, 44.8px);
  margin-bottom: clamp(0px, 2.0833333333vw, 42px);
  line-height: 1.6875;
  font-weight: bold;
  text-align-last: left;
}
@media screen and (max-width: 767px) {
  .top-sec#lead .lead-text h2 {
    line-height: 1.6154;
    margin-bottom: 20px;
    text-indent: 0;
    font-size: clamp(0px, 67.467vw, 18.2px);
    text-align: left;
  }
}
.top-sec#lead .lead-text .btn-link {
  margin-top: clamp(0px, 4.1666666667vw, 84px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .lead-text .btn-link {
    margin-left: auto;
    margin-top: clamp(0px, 8vw, 42px);
    font-size: clamp(0px, 4.2666666667vw, 22.4px);
    --arrow-bg-color: var(--color-black-text);
    --arrow-inner-color: ;
  }
}
.top-sec#lead .img-grp {
  line-height: 1;
  font-size: 0;
  order: 1;
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp {
    height: 257px;
    width: 100%;
    position: relative;
  }
}
.top-sec#lead .img-grp .img {
  position: absolute;
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}
.top-sec#lead .img-grp .a {
  top: 0;
  right: clamp(0px, 4.0277777778vw, 81.2px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .a {
    width: clamp(0px, 31.2vw, 163.8px);
    height: clamp(0px, 31.2vw, 163.8px);
    right: clamp(0px, 15.4666666667vw, 81.2px);
  }
}
.top-sec#lead .img-grp .b {
  top: clamp(0px, 24.1666666667vw, 487.2px);
  right: clamp(0px, 11.6666666667vw, 235.2px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .b {
    width: clamp(0px, 25.3333333333vw, 133px);
    height: clamp(0px, 25.3333333333vw, 133px);
    right: clamp(0px, 52vw, 273px);
    top: clamp(0px, 20.2666666667vw, 106.4px);
  }
}
.top-sec#lead .img-grp .c {
  bottom: clamp(0px, 3.2638888889vw, 65.8px);
  left: 0;
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .c {
    bottom: 0;
    left: 0;
    width: clamp(0px, 36.5333333333vw, 191.8px);
    height: clamp(0px, 44vw, 231px);
  }
}
.top-sec#lead .img-grp .d {
  bottom: clamp(0px, 0vw, 0px);
  right: clamp(0px, 16.5277777778vw, 333.2px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .d {
    width: clamp(0px, 25.6vw, 134.4px);
    height: clamp(0px, 25.6vw, 134.4px);
    bottom: clamp(0px, 15.7333333333vw, 82.6px);
    right: clamp(0px, 32.5333333333vw, 170.8px);
  }
}
.top-sec#lead .img-grp .e {
  bottom: clamp(0px, 17.1527777778vw, 345.8px);
  right: clamp(-133px, -6.5972222222vw, 0px);
}
@media screen and (max-width: 767px) {
  .top-sec#lead .img-grp .e {
    width: clamp(0px, 27.7333333333vw, 145.6px);
    height: clamp(0px, 27.4666666667vw, 144.2px);
    right: 0;
    bottom: clamp(0px, 33.8666666667vw, 177.8px);
  }
}
.top-sec#lead .movie-wrap {
  position: relative;
  height: clamp(0px, 45.1388888889vw, 910px);
  overflow: hidden;
  margin-top: -107px;
  margin-bottom: -140px;
}
@media screen and (max-width: 767px) {
  .top-sec#lead .movie-wrap {
    height: clamp(0px, 75.7333333333vw, 397.6px);
  }
  .top-sec#lead .movie-wrap .js-slick-container {
    height: 100%;
  }
  .top-sec#lead .movie-wrap .js-slick-container .item {
    height: clamp(0px, 75.7333333333vw, 397.6px);
  }
  .top-sec#lead .movie-wrap .js-slick-container .item .img {
    height: 100%;
  }
}
.top-sec#lead .movie-wrap .movie-wrap-bg {
  position: relative;
}
.top-sec#lead .movie-wrap .movie-wrap-bg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: var(--color-black-text);
  opacity: 0.4;
  pointer-events: none;
}
.top-sec#lead .movie-wrap .movie-wrap-bg .item {
  overflow: hidden;
}
.top-sec#lead .movie-wrap .movie-wrap-bg .item img {
  transform: scale(1);
  transition: 20000ms;
  transition-delay: 500ms;
}
.top-sec#lead .movie-wrap .movie-wrap-bg .slick-current:not(.rdy) img {
  transform: scale(1.2);
  transition-delay: 0ms;
}
.top-sec#lead .movie-wrap a.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.top-sec#lead .movie-wrap:hover .play-btn .rotate {
  transform: scale(1.1);
}
.top-sec#lead .movie-wrap .play-btn {
  width: clamp(0px, 13.75vw, 277.2px);
  height: clamp(0px, 13.75vw, 277.2px);
  position: absolute;
  z-index: 2;
  bottom: calc(80 * var(--rpxClamp));
  right: calc(120 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .top-sec#lead .movie-wrap .play-btn {
    width: clamp(0px, 24vw, 126px);
    height: clamp(0px, 24vw, 126px);
    right: calc(12 * var(--rpxClamp));
    bottom: calc(17 * var(--rpxClamp));
  }
}
.top-sec#lead .movie-wrap .play-btn div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
}
.top-sec#lead .movie-wrap .play-btn .play {
  z-index: 1;
  pointer-events: none;
  background-image: url(../img/top/lead/play-icon@3x.png);
}
.top-sec#lead .movie-wrap .play-btn .rotate {
  z-index: 0;
  transition: 300ms cubic-bezier(0.59, -0.87, 0.45, 2.62);
}
.top-sec#lead .movie-wrap .play-btn .rotate:hover {
  transform: scale(1.1);
}
.top-sec#lead .movie-wrap .play-btn .rotate .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: cover;
  background-image: url(../img/top/lead/circle-elem@3x.png);
  animation: rotate-playbutton 30s linear infinite;
  animation-play-state: paused;
}
.top-sec#lead .movie-wrap .play-btn .rotate .inner.inview-0 {
  animation-play-state: running;
}
.top-sec#lead .movie-wrap hgroup {
  position: absolute;
  top: calc(100 * var(--rpxClamp));
  left: calc(220 * var(--rpxClamp));
  z-index: 2;
  color: #fff;
}
.top-sec#lead .movie-wrap hgroup .lead {
  margin-top: calc(14 * var(--rpxClamp));
  font-size: calc(16 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .top-sec#lead .movie-wrap hgroup {
    top: calc(43 * var(--rpxClamp));
    left: calc(20 * var(--rpxClamp));
  }
  .top-sec#lead .movie-wrap hgroup .lead {
    font-size: calc(13 * var(--rpxClamp));
  }
}
.top-sec#lead .markie {
  margin-top: clamp(0px, 8.0555555556vw, 162.4px);
  height: clamp(0px, 13.8888888889vw, 280px);
  background-image: url(../img/top/lead/markie-txt-bg@3x.png);
  background-size: cover;
  animation: page-footer-slide-markie 100s linear 0s infinite normal;
  
}
@media screen and (max-width: 767px) {
  .top-sec#lead .markie {
    height: clamp(0px, 20.8vw, 109.2px);
    margin-top: clamp(0px, 10.6666666667vw, 56px);
  }
}
.top-sec#lead .markie.inview-0 {
  animation-play-state: running;
  will-change: background-position;
}

/*
@note 莉穂ｺ九ｒ遏･繧� #work 
*/
.top-sec#work {
  padding-top: clamp(0px, 5.1388888889vw, 103.6px);
  padding-bottom: clamp(0px, 12.3611111111vw, 249.2px);

  background-image: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 8px, transparent 8px, transparent 16px ), linear-gradient(135deg, #FFE896 0%, #FBC400 100%);
}
@media screen and (max-width: 767px) {
  .top-sec#work {
    padding: clamp(0px, 13.3333333333vw, 70px) clamp(0px, 5.3333333333vw, 28px);
    padding-bottom: 0;
  }
}
.top-sec#work .card-list {
  gap: clamp(0px, 8vw, 42px);
}
@media screen and (min-width: 768px) {
  .top-sec#work .card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0px, 1.3888888889vw, 28px);
  }
}
@media screen and (min-width: 768px) {
  .top-sec#work .card-list hgroup {
    padding-right: clamp(0px, 1.875vw, 37.8px);
  }
}
@media screen and (max-width: 767px) {
  .top-sec#work .card-list .img {
    height: 168px;
  }
}

/*
@note 莉ｲ髢薙ｒ遏･繧� #people 
*/
@media screen and (max-width: 767px) {
  #page-people {
    overflow: hidden;
  }
}

.top-sec#people {
  padding-bottom: clamp(0px, 12.5vw, 252px);
  position: relative;
  padding-top: clamp(0px, 5.1388888889vw, 103.6px);
}
@media screen and (max-width: 767px) {
  .top-sec#people {
    padding: clamp(0px, 17.3333333333vw, 91px) clamp(0px, 5.3333333333vw, 28px) clamp(0px, 17.3333333333vw, 91px) clamp(0px, 5.3333333333vw, 28px);
  }
  .top-sec#people .lead br {
    display: none;
  }
}
.top-sec#people:after {
  content: "";
  width: 100%;
  height: clamp(0px, 123.625vw, 3540.6px);
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url(../img/global/dot-bg-03@2x.jpg);
  background-repeat: no-repeat;
  z-index: -1;
  background-position: top center;
}
@media screen and (max-width: 767px) {
  .top-sec#people:after {
    height: clamp(0px, 243.4vw, 3540.6px);
    background-image: url(../img/global/dot-bg-03-sp@2x.jpg);
    background-size: cover;
    background-position: top center;
  }
}
.top-sec#people .inner {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .top-sec#people .interview-list > p {
    font-size: clamp(0px, 19.2vw, 100.8px);
    line-height: clamp(0px, 23.4666666667vw, 123.2px);
  }
}
.top-sec#people .card-list {
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(0px, 0.4861111111vw, 9.8px);
  gap: clamp(0px, 1.3888888889vw, 28px);
  counter-reset: number 0;
  --arrow-bg-color: #fff;
  --arrow-inner-color: var(--color-accent);
  position: relative;
}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list {
    width: 100vw;
    margin-left: clamp(-28px, -5.3333333333vw, 0px);
    overflow-x: auto;
    padding: 0 clamp(0px, 5.3333333333vw, 28px) clamp(0px, 8vw, 42px) clamp(0px, 5.3333333333vw, 28px);
    gap: clamp(0px, 4vw, 21px);
    margin-top: clamp(-35px, -6.6666666667vw, 0px);
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;
    -ms-overflow-style: none;
  }
  .top-sec#people .card-list::-webkit-scrollbar {
    display: none;
  }
  .top-sec#people .card-list li {
    scroll-snap-align: center;
    position: relative;
  }
  .top-sec#people .card-list li h3 {
    font-size: 24px;
  }
  .top-sec#people .card-list li h3 .en {
    font-weight: 600;
  }
  .top-sec#people .card-list li .btn-link {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .top-sec#people .card-list li:nth-of-type(2) {
    transform: translateY(clamp(-84px, -4.1666666667vw, 0px));
  }
  .top-sec#people .card-list li:nth-of-type(3) {
    transform: translateY(clamp(-168px, -8.3333333333vw, 0px));
  }
}
.top-sec#people .card-list .img {
  position: relative;
  height: clamp(0px, 32.6388888889vw, 658px);
}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list .img {
    width: 272px;
    height: 399px;
  }
}
.top-sec#people .card-list .img img {
  position: absolute;
  top: 0;
  left: 0;
}
.top-sec#people .card-list .img img.base {
  transform: scale(1) !important;
}
.top-sec#people .card-list .img img.hover {
  opacity: 0;
  transition-delay: 500ms;
}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list .img img.hover {
    transition-delay: 0ms;
  }
}
@media screen and (min-width: 768px) {
  .top-sec#people .card-list .img:hover .hover {
    will-change: transform, opacity;
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list .img .interview-index {
    width: 80px;
    top: 20px;
    right: 0px;
    color: #e8e8e8;
    mix-blend-mode: multiply;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* background: #2d8e3b; */
    /* padding: 10px; */
  }
}
.top-sec#people .card-list .img .name {
  color: #FFF;
  background: #2D8E3B;
  padding: 5px 10px;
  font-size: clamp(0px, 2.9166666667vw, 38.8px);
  position: absolute;
  z-index: 2;
  bottom: clamp(0px, 1.3888888889vw, 28px);
  left: clamp(0px, 0.625vw, 12.6px);
  line-height: 1.2143;
  transform-origin: left bottom;
  transform: rotate(-90deg) translateY(100%);
  font-weight: bolder;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
@media screen and (max-width: 767px) {
  .top-sec#people .card-list .img .name {
    font-size: clamp(0px, 11.2vw, 24.8px);
    left: clamp(0px, 2.1333333333vw, 11.2px);
    bottom: clamp(0px, 4.8vw, 25.2px);
  }
}
.top-sec#people .flx {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-end;
  --arrow-bg-color: var(--color-black-text);
  --arrow-inner-color: var(--color-accent);
}
.top-sec#people .flx b {
  font-weight: bold;
}
.top-sec#people .flx a.btn-link:hover i {
  --arrow-inner-color: var(--color-accent) !important;
}

/*
@note 迺ｰ蠅�ｒ遏･繧� #environment 
*/
.top-sec#environment {
  padding-top: clamp(0px, 8.0555555556vw, 162.4px);
  padding-bottom: clamp(0px, 10.8333333333vw, 218.4px);
}
@media screen and (max-width: 767px) {
  .top-sec#environment {
    padding: clamp(0px, 18.6666666667vw, 98px) clamp(0px, 5.3333333333vw, 28px);
  }
}
.top-sec#environment .card-list {
  gap: clamp(0px, 2.0833333333vw, 42px);
}
@media screen and (max-width: 767px) {
  .top-sec#environment .card-list {
    gap: clamp(0px, 11.7333333333vw, 61.6px);
  }
  .top-sec#environment .card-list .btn-link {
    display: none;
  }
}

/* -----------------------------
@map 莠碁嚴螻､莉･髯�
----------------------------- */
.secondary-page {
  /*
  @note 繝壹�繧ｸ繝倥ャ繝€繝ｼ
  */
}
.secondary-page .secondary-page-title-header {
  position: relative;
  height: clamp(0px, 31.5972222222vw, 637px);
  background: #ccc;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .secondary-page .secondary-page-title-header {
    height: clamp(0px, 65.0666666667vw, 341.6px);
  }
}
.secondary-page .secondary-page-title-header h1 {
  --header-color: #fff;
  width: var(--max-width);
  margin: auto;
  margin-bottom: clamp(0px, 9.0277777778vw, 182px);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .secondary-page .secondary-page-title-header h1 {
    margin-left: clamp(0px, 5.3333333333vw, 28px);
    margin-bottom: clamp(0px, 13.3333333333vw, 70px);
  }
}
.secondary-page .secondary-page-title-header .img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.secondary-page .secondary-page-title-header .img:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.25);
  mix-blend-mode: multiply;
}

/*
@note 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ
*/
section[class^=sec-] {
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
}
section[class^=sec-] > .inner {
  width: var(--max-width);
  margin: 0 auto;
}
section[class^=sec-] p.lead {
  margin: clamp(0px, 2.2916666667vw, 46.2px) 0 clamp(0px, 4.0277777778vw, 81.2px) 0;
  line-height: 1.8;
  text-align: center;
  font-weight: 300;
}
@media screen and (max-width: 767px) {
  section[class^=sec-] p.lead {
    margin: calc(20 * var(--rpxClamp)) 0;
    text-align: justify;
  }
}

.bg-noise {
  background-image: url(../img/global/dot-bg-03@2x.jpg);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .bg-noise {
    background-image: url(../img/global/dot-bg-03-sp@2x.jpg);
  }
}

/* -----------------------------
@map About 莨夂､ｾ繧堤衍繧�
----------------------------- */
.sec-philosophy {
  --section-padding-top:clamp(0px, 10.9027777778vw, 219.8px);
  --section-padding-bottom:clamp(0px, 9.5833333333vw, 193.2px);
}
@media screen and (max-width: 767px) {
  .sec-philosophy {
    --section-padding-top:clamp(0px, 13.3333333333vw, 70px);
    --section-padding-bottom:clamp(0px, 13.3333333333vw, 70px);
  }
}

.grid-wrap {
  display: grid;
  grid-template-columns: clamp(0px, 31.7361111111vw, 639.8px) 1fr;
  align-items: flex-start;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .grid-wrap {
    padding: 0 clamp(0px, 5.3333333333vw, 28px);
    display: block;
  }
}
.grid-wrap .txt {
  padding-top: clamp(0px, 3.125vw, 63px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 35px;
}
@media screen and (max-width: 767px) {
  .grid-wrap .txt {
    gap: clamp(0px, 4.2666666667vw, 22.4px);
    padding-top: clamp(0px, 5.3333333333vw, 28px);
  }
}
.grid-wrap .txt * {
  width: 100%;
}
.grid-wrap .txt h3 {
  font-size: clamp(0px, 2.2222222222vw, 44.8px);
  line-height: 1.6875;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .grid-wrap .txt h3 {
    font-size: clamp(0px, 5.3333333333vw, 28px);
  }
}
.grid-wrap .txt p {
  font-weight: 300;
  line-height: 1.8;
  margin-top: -0.4em;
  margin-bottom: -0.4em;
}

@media screen and (min-width: 768px) {
  .sec-9action {
    --section-padding-top:calc(0 * var(--rpxClamp));
    --section-padding-bottom:calc(0 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .sec-9action {
    padding: 0 20px;
    --section-padding-top:calc(0 * var(--rpxClamp));
    --section-padding-bottom:calc(0 * var(--rpxClamp));
  }
}
.sec-9action .inner {
  border-top: 1px solid var(--color-gray-hairline);
  padding-top: clamp(0px, 7.7083333333vw, 155.4px);
  position: relative;
}
@media screen and (min-width: 768px) {
  .sec-9action .inner {
    display: block;
    padding-left: calc(457 * var(--rpxClamp));
  }
  .sec-9action .inner h2 {
    position: absolute;
    top: calc(111 * var(--rpxClamp));
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .sec-9action .inner {
    padding: 0;
    padding-top: 40px;
  }
}
.sec-9action:before {
  content: "";
  width: 1000px;
  border-top: 1px solid var(--color-gray-hairline);
}
.sec-9action ol {
  counter-reset: number;
  font-size: 24px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 56px;
  margin-bottom: clamp(0px, 11.1111111111vw, 224px);
}
@media screen and (max-width: 767px) {
  .sec-9action ol {
    font-size: clamp(0px, 3.7333333333vw, 19.6px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 2em;
    margin-top: clamp(0px, 2.6666666667vw, 14px);
    width: auto !important;
    margin-bottom: clamp(0px, 21.3333333333vw, 112px);
  }
}
.sec-9action ol li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  opacity: 0;
  transition: 500ms ease-in-out;
  transform: translate(20px, 0);
}
.sec-9action ol li.inview-50 {
  opacity: 1;
  transform: translate(0px, 0);
}
@media screen and (min-width: 768px) {
  .sec-9action ol li {
    gap: 38px;
    height: 50px;
  }
}
@media screen and (max-width: 767px) {
  .sec-9action ol li {
    font-size: clamp(0px, 3.7333333333vw, 19.6px);
    gap: clamp(0px, 5.0666666667vw, 26.6px);
  }
}
.sec-9action ol li:before {
  counter-increment: number 1;
  content: counter(number, decimal-leading-zero);
  font-size: 40px;
  font-family: var(--font-en);
  font-weight: bold;
  color: var(--color-accent);
}
@media screen and (max-width: 767px) {
  .sec-9action ol li:before {
    font-size: clamp(0px, 5.3333333333vw, 28px);
  }
}

/*
@note - - observe蟇ｾ雎｡
*/
@media screen and (min-width: 768px) {
  .sec-9action h2 {
    position: relative;
  }
  :has(.start-anchor.inview-0) .sec-9action h2 {
    position: fixed;
    top: 50vh;
    left: 50%;
    transform: translateY(calc(-34 * var(--rpxClamp)));
    margin-left: calc(var(--max-width) * -0.5);
  }
  :has(.markie-img-list.inview-0) .sec-9action h2 {
    position: absolute;
    top: auto;
    bottom: 50vh;
    transform: translateY(calc(78 * var(--rpxClamp)));
  }
}
.sec-9action .start-anchor {
  position: absolute;
  pointer-events: none;
  visibility: hidden;
  top: calc(146 * var(--rpxClamp));
  width: 50px;
  transform: translateY(50%);
  height: 100vh;
  background: #eee;
}

/* 繝槭�繧ｭ繝ｼ */
.markie-img-list {
  width: 100%;
  height: clamp(0px, 26.9444444444vw, 543.2px);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .markie-img-list {
    width: 100vw;
    margin-left: calc(-20 * var(--rpxClamp));
    height: clamp(0px, 55.4666666667vw, 291.2px);
  }
}
.markie-img-list.inview-0 ul {
  animation-play-state: running;
  will-change: transform;
}
.markie-img-list ul {
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation: company-slide-markie 40s linear 0s infinite normal;
  animation-play-state: paused;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  width: auto;
  height: 100%;
  justify-content: start;
  flex-wrap: nowrap;
  animation-play-state: paused;
  gap: 0;
}
@media screen and (max-width: 767px) {
  .markie-img-list ul {
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    animation: company-slide-markie 40s linear 0s infinite normal;
    animation-play-state: paused;
  }
}
.markie-img-list ul li {
  width: clamp(0px, 40.8333333333vw, 823.2px);
}
@media screen and (max-width: 767px) {
  .markie-img-list ul li {
    width: clamp(0px, 83.7333333333vw, 439.6px);
  }
}
.markie-img-list ul li img {
  width: auto;
  height: 100%;
}

/*
@note 莠区･ｭ邏ｹ莉九�縺薙ｌ縺九ｉ縺ｮDAZZY
*/
@media screen and (min-width: 768px) {
  .sec-bussiness {
    --section-padding-top:calc(160 * var(--rpxClamp));
    --section-padding-bottom:calc(0 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .sec-bussiness {
    padding: 0 20px !important;
    padding-top: calc(60 * var(--rpxClamp)) !important;
  }
}
.sec-bussiness .bussiness-box-wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0px, 2.0833333333vw, 42px);
}
@media screen and (max-width: 767px) {
  .sec-bussiness .bussiness-box-wrap {
    gap: clamp(0px, 5.3333333333vw, 28px);
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box {
  background: #fff;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box:nth-of-type(2n) .img {
  order: 2;
}
@media screen and (min-width: 768px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box .img {
    width: clamp(0px, 41.875vw, 844.2px);
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box .txt {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box .txt {
    height: clamp(0px, 62.9333333333vw, 330.4px);
    gap: clamp(0px, 2.6666666667vw, 14px);
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box .txt h3 {
  line-height: 1;
  font-size: 24px;
}
@media screen and (max-width: 767px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box .txt h3 {
    font-size: clamp(0px, 4.8vw, 25.2px);
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box .txt p {
  text-align: center;
  margin-top: -0.4em;
  margin-bottom: -0.4em;
}
.sec-bussiness .bussiness-box-wrap .bussiness-box .txt .DAZZY {
  margin-top: clamp(0px, 1.1111111111vw, 22.4px);
}
@media screen and (max-width: 767px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box .txt .DAZZY {
    margin-top: 0;
    height: clamp(0px, 10.6666666667vw, 56px);
    width: auto;
  }
}
.sec-bussiness .bussiness-box-wrap .bussiness-box .txt .DRW {
  margin-top: clamp(0px, 1.6666666667vw, 33.6px);
}
@media screen and (max-width: 767px) {
  .sec-bussiness .bussiness-box-wrap .bussiness-box .txt .DRW {
    margin-top: 0;
    height: clamp(0px, 16vw, 84px);
    width: auto;
    padding: clamp(0px, 1.3333333333vw, 7px);
  }
}

.sec-future {
  --header-color: var(--color-black-text);
  --section-padding-top:clamp(0px, 6.9444444444vw, 140px);
  --section-padding-bottom:clamp(0px, 10.4166666667vw, 210px);
}
@media screen and (max-width: 767px) {
  .sec-future {
    padding: 0 clamp(0px, 5.3333333333vw, 28px);
    --section-padding-top:clamp(0px, 13.3333333333vw, 70px);
    --section-padding-bottom:clamp(0px, 18.6666666667vw, 98px);
  }
  .sec-future hgroup {
    text-align: center;
  }
}
.sec-future .future-box {
  margin-top: clamp(0px, 2.7777777778vw, 56px);
  padding: clamp(0px, 2.7777777778vw, 56px);
  background: #fff;
}
@media screen and (max-width: 767px) {
  .sec-future .future-box {
    margin-top: clamp(0px, 5.3333333333vw, 28px);
    padding: clamp(0px, 5.3333333333vw, 28px);
  }
}
.sec-future .future-box .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 767px) {
  .sec-future .future-box .inner {
    display: block;
  }
}
.sec-future .future-box .inner .txt {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .sec-future .future-box .inner .txt {
    padding-left: clamp(0px, 3.125vw, 63px);
    gap: 23px;
  }
}
.sec-future .future-box .inner .txt * {
  width: 100%;
}
.sec-future .future-box .inner .txt h3 {
  line-height: 1;
  font-size: clamp(0px, 2.0138888889vw, 40.6px);
}
@media screen and (max-width: 767px) {
  .sec-future .future-box .inner .txt h3 {
    margin-top: clamp(0px, 5.3333333333vw, 28px);
    font-size: clamp(0px, 4.8vw, 25.2px);
    margin-bottom: clamp(0px, 2.6666666667vw, 14px);
  }
}
.sec-future .future-box .inner .txt p {
  line-height: 1.8;
  font-weight: 300;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .sec-future .future-box .inner .txt p {
    white-space: normal;
    font-size: clamp(0px, 4.2666666667vw, 22.4px);
  }
  .sec-future .future-box .inner .txt p br {
    display: none;
  }
}

/*
@note 莨夂､ｾ讎りｦ�
*/
.sec-company {
  --header-color: var(--color-black-text);
  --section-padding-top:clamp(0px, 8.3333333333vw, 168px);
  --section-padding-bottom:clamp(0px, 10.4166666667vw, 210px);
}
@media screen and (max-width: 767px) {
  .sec-company {
    padding: 0 clamp(0px, 5.3333333333vw, 28px);
    --header-color: var(--color-accent);
    --section-padding-top:clamp(0px, 14.6666666667vw, 77px);
    --section-padding-bottom:clamp(0px, 18.6666666667vw, 98px);
  }
  .sec-company h2 {
    align-items: flex-start;
  }
}

@media screen and (max-width: 767px) {
  .company-info-dl-grp {
    margin-top: clamp(0px, 5.3333333333vw, 28px);
  }
}
@media screen and (min-width: 768px) {
  .company-info-dl-grp dl {
    display: grid;
    grid-template-columns: 190px 1fr;
  }
}
@media screen and (max-width: 767px) {
  .company-info-dl-grp dl {
    font-size: clamp(0px, 3.4666666667vw, 18.2px);
    padding: clamp(0px, 6.4vw, 33.6px) 0;
  }
}

/* -----------------------------
@map 莉穂ｺ九ｒ遏･繧� / 莉穂ｺ狗ｴｹ莉�
----------------------------- */
#page-work .secondary-page-title-header .img:before {
  background: rgba(0, 0, 0, 0.45);
}

section.sec-ourjobs {
  --section-padding-bottom: calc(160 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  section.sec-ourjobs {
    padding: clamp(0px, 13.3333333333vw, 70px) clamp(0px, 5.3333333333vw, 28px);
    padding-bottom: clamp(0px, 18.6666666667vw, 98px);
  }
}

/*
@note 莉穂ｺ九Μ繧ｹ繝�
*/
.work-list {
  --card-list-gap:clamp(0px, 6.25vw, 126px) clamp(0px, 4.8611111111vw, 98px);
  --arrow-bg-color: var(--color-accent);
  --arrow-inner-color: #fff;
  --btn-circle-border-color: var(--color-accent);
  margin-top: clamp(0px, 2.9861111111vw, 60.2px);
}
@media screen and (max-width: 767px) {
  .work-list {
    margin-top: clamp(0px, 8vw, 42px);
    gap: clamp(0px, 10.6666666667vw, 56px);
  }
}
.work-list li {
  grid-row: span 3;
  gap: clamp(0px, 1.9444444444vw, 39.2px);
}
@media screen and (max-width: 767px) {
  .work-list li {
    gap: clamp(0px, 5.3333333333vw, 28px);
  }
}
.work-list li .img {
  margin-bottom: clamp(0px, 0.6944444444vw, 14px);
  height: clamp(0px, 20.1388888889vw, 406px);
}
@media screen and (max-width: 767px) {
  .work-list li .img {
    height: clamp(0px, 55.4666666667vw, 291.2px);
  }
}
.work-list li .txt {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  justify-content: start;
  gap: clamp(0px, 0.9722222222vw, 19.6px);
}
@media screen and (max-width: 767px) {
  .work-list li .txt {
    gap: clamp(0px, 2.1333333333vw, 11.2px);
  }
  .work-list li .txt h3 {
    font-weight: 500;
  }
}
.work-list li .txt * {
  width: 100%;
}
.work-list li .link {
  text-align: right;
}
@media screen and (max-width: 767px) {
  .work-list li .link {
    margin-top: clamp(-14px, -2.6666666667vw, 0px);
  }
}
.work-list li .link a {
  display: inline-flex;
}
.work-list li.no-timeline a {
  pointer-events: none;
}
.work-list li.no-timeline .txt {
  grid-row: span 2;
}
.work-list li.no-timeline .link {
  display: none;
}

/*
@note *繝昴ャ繝励い繝��*繧ｹ繧ｱ繧ｸ繝･繝ｼ繝ｫ
*/
.work-detail-display-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background: var(--color-accent);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: 500ms;
}
body:has(.work-detail-display:target) .work-detail-display-bg {
  opacity: 1;
  pointer-events: auto;
}

.work-detail-display {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 11;
  height: 100vh;
  width: clamp(0px, 59.4444444444vw, 1198.4px);
  background: #fff;
  pointer-events: none;
  transform: translate(100%, 0);
  transition: 800ms cubic-bezier(0.34, 0.27, 0, 1);
}
@media screen and (max-width: 767px) {
  .work-detail-display {
    width: calc(100vw - clamp(0px, 10.6666666667vw, 56px));
  }
}
.work-detail-display:target {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0);
}
.work-detail-display .inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  z-index: 1;
  overscroll-behavior: contain;
}
.work-detail-display .close {
  position: absolute;
  width: clamp(0px, 3.125vw, 63px);
  height: clamp(0px, 3.1944444444vw, 64.4px);
  top: clamp(0px, 4.7222222222vw, 95.2px);
  right: clamp(0px, 9.5833333333vw, 193.2px);
  z-index: 3;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .work-detail-display .close {
    top: 32px;
    width: calc(35 * var(--rpxClamp));
    height: auto;
  }
}
.work-detail-display .close:hover {
  transform: scale(1.05);
}
.work-detail-display .close:active {
  transform: scale(1);
}
.work-detail-display .close img {
  width: 100%;
  height: 100%;
}
.work-detail-display h2 {
  width: clamp(0px, 8.8888888889vw, 179.2px);
  height: clamp(0px, 8.8888888889vw, 179.2px);
  border-radius: 100%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  line-height: 1;
  position: absolute;
  top: clamp(0px, 5vw, 100.8px);
  left: clamp(0px, 7.6388888889vw, 154px);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .work-detail-display h2 {
    width: clamp(0px, 24.2666666667vw, 127.4px);
    height: clamp(0px, 24.2666666667vw, 127.4px);
    font-size: clamp(0px, 3.2vw, 16.8px);
    top: clamp(0px, 11.4666666667vw, 60.2px);
    left: clamp(0px, 3.2vw, 16.8px);
  }
}

.work-detail {
  padding: clamp(0px, 8.3333333333vw, 168px) clamp(0px, 15.1388888889vw, 305.2px) clamp(0px, 10.4166666667vw, 210px) clamp(0px, 10.2777777778vw, 207.2px);
  position: relative;
  overflow: hidden;
}
.work-detail > * {
  z-index: 1;
  position: relative;
}
.work-detail:before {
  content: "";
  display: block;
  width: 200%;
  height: 100%;
  z-index: 0;
  position: absolute;
  top: clamp(0px, 23.2638888889vw, 469px);
  left: -100px;
  background: var(--color-gray-lite-bg);
}
@media screen and (max-width: 767px) {
  .work-detail:before {
    top: calc(205 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .work-detail {
    padding: clamp(0px, 24vw, 126px) clamp(0px, 8.8vw, 46.2px) clamp(0px, 18.6666666667vw, 98px) clamp(0px, 8.8vw, 46.2px);
  }
}
.work-detail h3 {
  margin: clamp(0px, 4.1666666667vw, 84px) 0 clamp(0px, 3.4722222222vw, 70px) 0;
  font-size: clamp(0px, 1.1111111111vw, 22.4px);
  line-height: 1.8;
  padding-bottom: clamp(0px, 1.25vw, 25.2px);
  border-bottom: clamp(0px, 0.0694444444vw, 1.4px) solid var(--color-black-text);
}
@media screen and (max-width: 767px) {
  .work-detail h3 {
    font-size: 16px;
    font-weight: 500;
    padding-bottom: clamp(0px, 2.6666666667vw, 14px);
    margin: clamp(0px, 6.9333333333vw, 36.4px) 0 clamp(0px, 4.5333333333vw, 23.8px) 0;
  }
}
.work-detail .img {
  border-radius: calc(5 * var(--rpxClamp));
}
.work-detail .dl-grp {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0px, 4.1666666667vw, 84px);
  position: relative;
}
@media screen and (max-width: 767px) {
  .work-detail .dl-grp {
    font-size: calc(13 * var(--rpxClamp));
  }
}
.work-detail .dl-grp:before {
  content: "";
  display: block;
  height: 100%;
  width: 1px;
  background-image: url(../img/work/border-dot@3x.png);
  background-size: 1px auto;
  position: absolute;
  top: clamp(0px, 0.8333333333vw, 16.8px);
  left: clamp(0px, 6.6666666667vw, 134.4px);
}
@media screen and (max-width: 767px) {
  .work-detail .dl-grp:before {
    display: none;
  }
}
.work-detail .dl-grp dl.timeline {
  width: 100%;
  display: grid;
  grid-template-columns: calc(75 * var(--rpxClamp)) 1fr;
  gap: clamp(0px, 3.1944444444vw, 64.4px);
}
@media screen and (max-width: 767px) {
  .work-detail .dl-grp dl.timeline {
    gap: 20px;
    grid-template-columns: calc(64 * var(--rpxClamp)) 1fr;
  }
}
.work-detail .dl-grp dl.timeline dt {
  height: calc(26 * var(--rpxClamp));
  background: var(--color-black-text);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  line-height: 1;
  border-radius: 50px;
}
@media screen and (max-width: 767px) {
  .work-detail .dl-grp dl.timeline dt {
    height: 23px;
    white-space: nowrap;
  }
}
.work-detail .dl-grp dl.timeline dd h4 {
  margin-bottom: 0.5em;
  line-height: 24px;
}
@media screen and (max-width: 767px) {
  .work-detail .dl-grp dl.timeline dd h4 {
    margin-bottom: 0.35em;
  }
}

/* -----------------------------
@map Day in the life 1譌･蟇�捩蜍慕判
----------------------------- */
@media screen and (max-width: 767px) {
  #page-day-in-the-life h1 .en {
    font-size: calc(50 * var(--rpxClamp));
  }
}

@media screen and (max-width: 767px) {
  #day-in-the-life {
    padding: calc(50 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
  #day-in-the-life .lead {
    text-align: center !important;
  }
}

.youtube-wrap {
  width: clamp(0px, 62.5vw, 1260px);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .youtube-wrap {
    width: 100%;
  }
}
.youtube-wrap iframe {
  width: 100%;
}

.sec-correlation-map {
  background: var(--color-gray-lite-bg);
}
@media screen and (max-width: 767px) {
  .sec-correlation-map {
    padding: calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
  .sec-correlation-map .lead {
    text-align: center !important;
  }
}
.sec-correlation-map .img-wrap {
  width: clamp(0px, 62.5vw, 1260px);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .sec-correlation-map .img-wrap {
    width: 100%;
  }
}

/* -----------------------------
@map 莉ｲ髢薙ｒ遏･繧� / 繧ｹ繧ｿ繝�ヵ繧､繝ｳ繧ｿ繝薙Η繝ｼ
----------------------------- */
.sec-interview {
  counter-reset: number 0;
  background-color: #f5f2f2;
  gap: calc(40 * var(--rpxClamp));
  padding-bottom: clamp(0px, 14.5833333333vw, 294px);
  position: relative;
  background-image: url(../img/global/dot-bg-04@2x.jpg);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .sec-interview {
    padding: calc(50 * var(--rpxClamp)) calc(10 * var(--rpxClamp)) calc(70 * var(--rpxClamp)) calc(10 * var(--rpxClamp));
    background-image: url(../img/global/dot-bg-04-sp@2x.jpg);
    gap: clamp(0px, 5.3333333333vw, 28px);
  }
  .sec-interview:before {
    content: "";
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: linear-gradient(-180deg, #f4f4f4 50%, rgba(244, 244, 244, 0) 100%);
  }
  .sec-interview > * {
    z-index: 1;
    position: relative;
  }
  .sec-interview .lead {
    text-align: center !important;
    margin-bottom: calc(50 * var(--rpxClamp)) !important;
  }
}

@media screen and (max-width: 767px) {
  .interview-item-list {
    gap: calc(20 * var(--rpxClamp));
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (max-width: 767px) {
  .inner-bg.interview-item .btn-circle-anchor {
    right: calc(10 * var(--rpxClamp));
    bottom: calc(30 * var(--rpxClamp));
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item {
    width: var(--max-width);
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item header {
    grid-template-columns: 50% 50%;
    height: clamp(0px, 24.7916666667vw, 499.8px);
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .header-img {
    order: 1;
    height: calc(193 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .title {
    order: 2;
    padding: 12px 20px 28px 20px;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .title .message:before {
    width: calc(86 * var(--rpxClamp));
    height: calc(83 * var(--rpxClamp));
    right: calc(40 * var(--rpxClamp));
    top: calc(8 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .title .message p {
    font-size: calc(20 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .title .message:after {
    margin: calc(15 * var(--rpxClamp)) 0;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .title h2 .ja {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item header .btn-circle-anchor {
    right: clamp(0px, 3.4722222222vw, 70px);
    bottom: clamp(0px, 3.4722222222vw, 70px);
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item header .btn-circle-anchor {
    top: clamp(0px, 33.0666666667vw, 173.6px);
    right: clamp(0px, 0vw, 0px);
  }
}
.open .btn-circle-anchor {
  transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
  .open .btn-circle-anchor {
    bottom: calc(10 * var(--rpxClamp)) !important;
  }
}

@media screen and (min-width: 768px) {
  .inner-bg.interview-item article > .inner {
    width: clamp(0px, 56.25vw, 1134px);
    margin: clamp(0px, 6.9444444444vw, 140px) auto clamp(0px, 9.2361111111vw, 186.2px) auto;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item article > .inner {
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item article .article-inner-body {
    gap: clamp(0px, 8vw, 42px);
    padding: 0 var(--section-inner-gap);
    padding: 0 calc(20 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .text-item h3 {
    font-size: calc(16 * var(--rpxClamp));
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item .text-item h3 span {
    line-height: 1;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .text-item h3 span:before {
    font-size: calc(12 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .text-item h3:before {
    font-size: calc(16 * var(--rpxClamp));
    width: calc(33 * var(--rpxClamp));
    height: calc(33 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .text-item p {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap {
    margin: calc(80 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(60 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
    padding: calc(64 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
    border-radius: calc(24 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap:before {
    width: calc(85 * var(--rpxClamp));
    height: calc(83 * var(--rpxClamp));
    right: calc(20 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap h3 {
    font-size: calc(26 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap .img {
    left: calc(-10 * var(--rpxClamp));
    margin: calc(30 * var(--rpxClamp)) 0;
    height: calc(180 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap .result {
    border-radius: calc(24 * var(--rpxClamp));
    padding: calc(25 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .skillmap-wrap .result h4 {
    font-size: calc(16 * var(--rpxClamp));
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item .indispensable-item-wrap {
    margin-top: clamp(0px, 4.8611111111vw, 98px);
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-wrap + .btn-wrap {
    margin-top: calc(77 * var(--rpxClamp)) !important;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-list {
    gap: calc(22 * var(--rpxClamp));
    padding: 0 calc(30 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-list .item {
    font-size: calc(13 * var(--rpxClamp));
    width: 100%;
    display: grid;
    grid-template-columns: calc(100 * var(--rpxClamp)) 1fr;
    gap: 0 calc(15 * var(--rpxClamp));
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  .inner-bg.interview-item .indispensable-item-list .item h4 {
    margin-bottom: 0.6em;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-list .item h4 {
    font-weight: 500;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-list .item p {
    grid-column: 2;
  }
}
@media screen and (max-width: 767px) {
  .inner-bg.interview-item .indispensable-item-list .img {
    width: calc(100 * var(--rpxClamp));
    height: calc(100 * var(--rpxClamp));
  }
}

@media screen and (min-width: 768px) {
  .interview-index {
    transform: translateX(100%);
  }
}
@media screen and (max-width: 767px) {
  .interview-index {
    width: calc(42 * var(--rpxClamp));
    top: calc(22 * var(--rpxClamp));
    right: calc(22 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .interview-index i {
    font-size: calc(10 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .interview-index .number {
    font-size: calc(44 * var(--rpxClamp));
  }
}

/* -----------------------------
@map 迺ｰ蠅�ｒ遏･繧� /enbionment
----------------------------- */
/*
@note 隧穂ｾ｡蛻ｶ蠎ｦ
*/
@media screen and (max-width: 767px) {
  #page-environment h1 .en {
    font-size: calc(50 * var(--rpxClamp));
  }
}

section.sec-assessment {
  --section-padding-top: calc(130 * var(--rpxClamp));
  --section-padding-bottom: calc(130 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  section.sec-assessment {
    padding: calc(50 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
  section.sec-assessment hgroup {
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  section.sec-assessment .inner {
    width: clamp(0px, 72.9166666667vw, 1470px);
  }
}
@media screen and (min-width: 768px) {
  section.sec-assessment .grid {
    display: grid;
    grid-template-columns: clamp(0px, 21.5277777778vw, 434px) clamp(0px, 47.7083333333vw, 961.8px);
    justify-content: space-between;
    align-items: center;
  }
}
section.sec-assessment .grid ._2 {
  position: relative;
}
section.sec-assessment .grid ._2:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 0 0;
  margin: auto;
  width: 0%;
  height: 0%;
  z-index: 0;
  border: 1px solid #707070;
  border-radius: 100%;
  transition: 1500ms ease-in-out;
}
section.sec-assessment .grid ._2.inview-100:before {
  transform: scale(1);
  width: 63%;
  height: 63%;
}
section.sec-assessment .grid ._2 > * {
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  section.sec-assessment p.lead {
    text-align: justify !important;
  }
}
@media screen and (max-width: 767px) {
  section.sec-assessment p.lead {
    text-align: center;
    margin-bottom: calc(12 * var(--rpxClamp));
  }
}
section.sec-assessment .txt-banner {
  font-size: clamp(0px, 8.1944444444vw, 165.2px);
  color: var(--color-gray-hairline-lite);
}
@media screen and (max-width: 767px) {
  section.sec-assessment .txt-banner {
    overflow: hidden;
    font-size: calc(61 * var(--rpxClamp));
    width: 100%;
    text-align: center;
    line-height: calc(74 * var(--rpxClamp));
  }
  section.sec-assessment .txt-banner .en {
    display: block;
  }
}

/*
@note 遖丞茜蜴夂函
*/
section.sec-benefits {
  background: var(--color-gray-lite-bg);
  --section-padding-top:clamp(0px, 10.4166666667vw, 210px);
  --section-padding-bottom: clamp(0px, 12.9166666667vw, 260.4px);
}
@media screen and (max-width: 767px) {
  section.sec-benefits {
    padding: calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
  section.sec-benefits .lead {
    text-align: center !important;
  }
}
section.sec-benefits h3 {
  display: flex;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.sec-benefits h3 {
    width: clamp(0px, 69.4444444444vw, 1400px);
    margin-bottom: clamp(0px, 2.7083333333vw, 54.6px);
  }
}
@media screen and (max-width: 767px) {
  section.sec-benefits h3 {
    margin-bottom: calc(16 * var(--rpxClamp));
  }
}
section.sec-benefits h4 {
  margin: 0 auto;
  font-size: calc(20 * var(--rpxClamp));
  line-height: 1.2;
  margin-bottom: calc(14 * var(--rpxClamp));
}
@media screen and (min-width: 768px) {
  section.sec-benefits h4 {
    width: clamp(0px, 69.4444444444vw, 1400px);
  }
}
@media screen and (max-width: 767px) {
  section.sec-benefits h4 {
    font-size: calc(14 * var(--rpxClamp));
    margin-bottom: calc(12 * var(--rpxClamp));
  }
}
section.sec-benefits h4:before {
  content: "笆� ";
  color: var(--color-accent);
}
@media screen and (max-width: 767px) {
  section.sec-benefits h4.slide-title {
    padding: 0 calc(20 * var(--rpxClamp));
  }
}
section.sec-benefits .inner-repeat-block-grp {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  gap: clamp(0px, 4.8611111111vw, 98px);
}
@media screen and (min-width: 768px) {
  section.sec-benefits .inner-repeat-block-grp {
    max-width: 100vw;
  }
}
@media screen and (max-width: 767px) {
  section.sec-benefits .inner-repeat-block-grp {
    gap: calc(40 * var(--rpxClamp));
  }
}
section.sec-benefits .inner-repeat-block-grp .inner {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.sec-benefits .inner-repeat-block-grp .inner {
    width: clamp(0px, 69.4444444444vw, 1400px);
  }
}
@media screen and (max-width: 767px) {
  section.sec-benefits .inner-repeat-block-grp .inner .img {
    height: calc(250 * var(--rpxClamp));
  }
}

/*
@note - - 繧ｹ繝ｩ繧､繝�
*/
.envionment-slide-wrap {
  overflow: hidden;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0px, 3.4722222222vw, 70px);
  max-width: 100vw;
  overflow: visible;
}
.envionment-slide-wrap h4 {
  padding: 0 calc(20 * var(--rpxClamp));
}
.envionment-slide-wrap .item {
  margin: 0 clamp(0px, 1.7361111111vw, 35px);
  padding-bottom: clamp(0px, 3.4722222222vw, 70px);
}
@media screen and (min-width: 768px) {
  .envionment-slide-wrap .item {
    width: clamp(0px, 69.4444444444vw, 1400px) !important;
  }
}
@media screen and (max-width: 767px) {
  .envionment-slide-wrap .item {
    width: 100vw;
    padding: 0 20px;
  }
}
.envionment-slide-wrap .item .img {
  height: clamp(0px, 32.3611111111vw, 652.4px);
}
@media screen and (max-width: 767px) {
  .envionment-slide-wrap .item .img {
    height: calc(250 * var(--rpxClamp));
  }
}
.envionment-slide-wrap .item .desc {
  font-weight: 500;
  line-height: 1.5;
  margin-top: clamp(0px, 1.25vw, 25.2px);
}

.slick-custom-btn {
  width: clamp(0px, 69.4444444444vw, 1400px);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-end;
  gap: clamp(0px, 1.3888888889vw, 28px);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .slick-custom-btn {
    display: none;
  }
}
.slick-custom-btn .btn:hover {
  transform: scale(1.05);
}
.slick-custom-btn .btn:active {
  transform: scale(1);
}
.slick-custom-btn .btn-circle-anchor {
  --btn-circle-inner-color: #fff !important;
  --btn-circle-size: clamp(0px, 3.75vw, 75.6px);
  --btn-circle-anchor-size: clamp(0px, 0.625vw, 12.6px);
  --btn-circle-bg-color: var(--color-black-text);
}

.slick-dots {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  --dott-color: #D5D5D5;
  height: calc(54 * var(--rpxClamp));
  align-items: center;
}
@media screen and (min-width: 768px) {
  .slick-dots {
    transform: translate(0, 100%);
  }
}
@media screen and (max-width: 767px) {
  .slick-dots {
    height: auto;
    gap: calc(8 * var(--rpxClamp));
    position: relative;
    margin-top: calc(16 * var(--rpxClamp));
  }
}
.slick-dots li {
  height: calc(30 * var(--rpxClamp));
  width: calc(30 * var(--rpxClamp));
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .slick-dots li {
    width: auto;
    height: auto;
  }
}
.slick-dots li.slick-active {
  --dott-color: var(--color-black-text);
}
.slick-dots button {
  padding: 0;
  font-size: 0;
  appearance: none;
  border: none;
  border-radius: 100%;
}
.slick-dots button:before {
  content: "";
  width: calc(10 * var(--rpxClamp));
  height: calc(10 * var(--rpxClamp));
  display: block;
  background: var(--dott-color);
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  .slick-dots button:before {
    width: 6px;
    height: 6px;
  }
}

/*
@note 遉ｾ蜀�う繝吶Φ繝�
*/
section.sec-event {
  --section-padding-top:clamp(0px, 10.4166666667vw, 210px);
  --section-padding-bottom: clamp(0px, 11.1111111111vw, 224px);
  background-image: url(/wp-content/themes/recruit.dazzy.co.jp/assets/img/environment/event-bg@3x.jpg);
  background-size: cover;
  --title-color: #fff;
}
@media screen and (max-width: 767px) {
  section.sec-event {
    padding: calc(60 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
}

.event-list {
  margin-top: clamp(0px, 2.6388888889vw, 53.2px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0px, 2.6388888889vw, 53.2px);
  color: #fff;
}
@media screen and (min-width: 768px) {
  .event-list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-wrap: wrap;
    justify-content: center;
  }
  .event-list dl {
    width: calc(481 * var(--rpxClamp));
  }
}
@media screen and (max-width: 767px) {
  .event-list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: calc(20 * var(--rpxClamp));
    gap: calc(16 * var(--rpxClamp));
  }
}
.event-list dl {
  height: clamp(0px, 9.1666666667vw, 184.8px);
  background: var(--color-accent);
  line-height: 1.45;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0px, 0.4166666667vw, 8.4px);
}
@media screen and (max-width: 767px) {
  .event-list dl {
    width: 100%;
    height: calc(107 * var(--rpxClamp));
  }
}
.event-list dl dt {
  font-size: clamp(0px, 1.3888888889vw, 28px);
}
@media screen and (max-width: 767px) {
  .event-list dl dt {
    font-size: calc(18 * var(--rpxClamp));
  }
}
.event-list dl dd {
  font-size: clamp(0px, 1.1111111111vw, 22.4px);
}
@media screen and (max-width: 767px) {
  .event-list dl dd {
    font-size: calc(13 * var(--rpxClamp));
  }
}

/* -----------------------------
@map 謨ｰ蟄励〒隕九ｋdazzy
----------------------------- */
/*
@note 繝��繧ｿ邱ｨ
*/
@media screen and (max-width: 767px) {
  #page-data-of-dazzy h1 .en {
    font-size: calc(50 * var(--rpxClamp));
  }
}

.sec-data {
  background: var(--color-gray-lite-bg);
}
@media screen and (max-width: 767px) {
  .sec-data {
    padding: calc(50 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp));
  }
  .sec-data .lead {
    text-align: center !important;
  }
}

.data-list-grp {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(0px, 2.2222222222vw, 44.8px);
}
@media screen and (max-width: 767px) {
  .data-list-grp {
    grid-template-columns: 1fr 1fr;
    gap: calc(10 * var(--rpxClamp));
  }
}
.data-list-grp li {
  background: #fff;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}
.data-list-grp li.col-2 {
  grid-column: span 2;
  display: block;
  padding-bottom: calc(50 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .data-list-grp li.col-2 {
    padding-bottom: calc(20 * var(--rpxClamp));
  }
}
.data-list-grp li .row {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: clamp(0px, 2.7777777778vw, 56px);
  margin-top: clamp(0px, 1.5972222222vw, 32.2px);
}
.data-list-grp li .row .img {
  margin: 0;
}
@media screen and (max-width: 767px) {
  .data-list-grp li .row .img.graf {
    width: calc(173 * var(--rpxClamp));
    height: auto;
  }
  .data-list-grp li .row .img.graf img {
    width: 100% !important;
    height: auto !important;
  }
}
.data-list-grp li .row .data {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  justify-content: center;
  align-items: flex-start;
}
.data-list-grp li .row .data p {
  line-height: 1.225;
}
.data-list-grp li .row .data .year {
  display: block;
  font-weight: 500;
}
.data-list-grp li .row .data .caption {
  display: block;
  font-size: 12px;
}
@media screen and (max-width: 767px) {
  .data-list-grp li .row .data .caption {
    font-size: 9px;
    line-height: 14px;
  }
}
.data-list-grp li h3 {
  text-align: center;
  margin-top: clamp(0px, 4.1666666667vw, 84px);
  font-size: clamp(0px, 1.3888888889vw, 28px);
}
@media screen and (max-width: 767px) {
  .data-list-grp li h3 {
    font-size: 13px;
    height: 3em;
    text-align: center;
    grid-row: 1;
    margin-top: calc(16 * var(--rpxClamp));
    display: grid;
    align-items: center;
    line-height: 1.3;
  }
}
.data-list-grp li .img {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: clamp(0px, 1.25vw, 25.2px);
  margin-bottom: calc(8 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .data-list-grp li .img {
    margin: 6px 0;
    height: clamp(0px, 12.2666666667vw, 64.4px);
  }
  .data-list-grp li .img img {
    height: 100% !important;
    width: auto !important;
  }
}
.data-list-grp li .data {
  margin-bottom: clamp(0px, 3.8888888889vw, 78.4px);
  text-align: center;
  white-space: nowrap;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .data-list-grp li .data {
    margin-bottom: calc(20 * var(--rpxClamp));
  }
}
.data-list-grp li .data .en {
  color: var(--color-accent);
  font-size: calc(80 * var(--rpxClamp));
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .data-list-grp li .data .en {
    font-size: calc(44 * var(--rpxClamp));
  }
}
.data-list-grp li .data .en i {
  font-size: clamp(0px, 4.1666666667vw, 84px);
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .data-list-grp li .data .en i {
    font-size: calc(36 * var(--rpxClamp));
  }
}
.data-list-grp li .data .ja {
  font-size: clamp(0px, 1.6666666667vw, 33.6px);
}
@media screen and (max-width: 767px) {
  .data-list-grp li .data .ja {
    font-size: 13px;
  }
}

/*
@note 繧｢繝ｳ繧ｱ繝ｼ繝育ｷｨ
*/
.sec-enquete {
  --section-padding-top:clamp(0px, 8.4722222222vw, 170.8px);
  --section-padding-bottom: clamp(0px, 17.3611111111vw, 350px);
}
@media screen and (max-width: 767px) {
  .sec-enquete {
    padding: calc(70 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) !important;
  }
  .sec-enquete .lead {
    text-align: center !important;
  }
}

.graf-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0px, 8.3333333333vw, 168px) clamp(0px, 5.9722222222vw, 120.4px);
  --graf-size: calc(284 * var(--rpxClamp));
}
@media screen and (max-width: 767px) {
  .graf-list {
    grid-template-columns: 1fr;
    gap: calc(0 * var(--rpxClamp));
  }
}
.graf-list dl {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0px, 8.1944444444vw, 165.2px);
}
@media screen and (max-width: 767px) {
  .graf-list dl {
    gap: 0;
  }
}
.graf-list dl dt {
  background: var(--color-black-text);
  height: clamp(0px, 4.0972222222vw, 82.6px);
  color: #fff;
  font-size: clamp(0px, 1.3888888889vw, 28px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .graf-list dl dt {
    height: 44px;
    font-size: 14px;
  }
}
.graf-list dl .img {
  width: var(--graf-size);
  height: var(--graf-size);
  background: #eee;
  overflow: visible;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .graf-list dl .img {
    width: 100% !important;
    height: auto !important;
  }
}
@media screen and (min-width: 768px) {
  .graf-list dl .img img {
    width: clamp(0px, 34.7222222222vw, 700px);
    height: clamp(0px, 34.7222222222vw, 700px);
  }
}
@media screen and (max-width: 767px) {
  .graf-list dl .img img {
    width: 100%;
    height: 100%;
  }
}

#global-navi {
  pointer-events: none;
  opacity: 0;
  transition: 500ms ease-in-out;
}
.show-gnav #global-navi {
  pointer-events: auto;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  #global-navi .bg {
    height: 150vh;
  }
}

#global-navi .bg {
  transform: var(--translateX);
  transition: var(--transition);
  opacity: var(--opacity);
}

#global-navi .bg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background: #FEE603;
  background-size: cover;
  background-position: top center;
}

@media screen and (max-width: 767px) {
  #global-navi .bg {
    position: fixed;
    background: #FEE603;
  }
}


.flip-card {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.flip-card-wrap {
  overflow: hidden;
}

.en.sub::before {
  content: "ー";
  width: 0.65em;
  height: 1px;
  color: #015eea;
  margin-right: 5px;
}

.card-list li .en{
  color: #2D8E3B;
  font-weight: bolder;
}

.card-list li p{
  display: block;
  margin-bottom: 30px;
}

.card-list li .btn-link {
  float: right;
}

.top-sec#people .lead br{
  display: block;
}


section#page-footer .btn-entry-wrap .arrow i{
  padding-left: 10px;
}


a.btn-entry .fa-solid.fa-arrow-right{
  color: #000 !important;
  padding-left: 10px;
  color: #FFF !important;
}

.top-sec#whatwork {
  padding-top: clamp(0px, 5.1388888889vw, 103.6px);
  padding-bottom: clamp(0px, 12.3611111111vw, 249.2px);
}

.interview-list{
  margin-top: 50px;
}

#whatwork img,
#faq img,
#culture img{
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
}


@media screen and (max-width: 767px) {
  .top-sec#whatwork,
  .top-sec#faq,
  .top-sec#culture
  {
    padding: clamp(0px, 17.3333333333vw, 91px) clamp(0px, 5.3333333333vw, 28px) clamp(0px, 17.3333333333vw, 91px) clamp(0px, 5.3333333333vw, 28px);
  }

  .top-sec hgroup + .lead{
    margin-bottom: 30px;
  }

  .interview-list{
    margin-top: 5px;
  }
  
}


@media screen and (max-width: 767px) {
  .top-sec#whatwork .img,
  .top-sec#faq .img,
  .top-sec#culture .img{
    height: 168px;
  }
}

  #faq .horizontal-wrap.block2{
    margin-top: 50px;
  }


@media screen and (min-width: 1024px) {
  #faq .horizontal-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }

  #faq .horizontal-wrap.block1 hgroup {
    width: 60%;
  }

  #faq .horizontal-wrap.block1 .img {
    width: 40%;
    flex: 0 0 560px;
  }

  #faq .horizontal-wrap.block2 hgroup {
    width: 50%;
  }

  #faq .horizontal-wrap.block2 .lead {
    width: 50%;
    margin-top: 0;
  }

  #faq .horizontal-wrap.block2 {
    align-items: flex-start;
    margin-top: 60px;
  }

#faq .horizontal-wrap.block2 .lead  br{
    display: none;
  }

  #faq .horizontal-wrap.block2 hgroup,
  #faq .horizontal-wrap.block2 .lead {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  #culture .culture-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }

  #culture .culture-text {
    flex: 1;
  }

  #culture .img {
    flex: 0 0 560px;
  }

  #culture .img img {
    width: 100%;
    height: auto;
    display: block;
  }
}

#faq .lead a,
.culture-text a{
  color: #FFF;
  width: 80%;
  margin: 30px auto;
  padding: 15px;
  text-align: center;
  border: none;
}
#faq .lead a:hover,
.culture-text a:hover{
  outline: none;
  color: #FFF;
  opacity: 0.7;
}

@media screen and (min-width: 768px) {
  #faq .lead a,
  .culture-text a{
    margin-left: 0;
    width: 50%;
  }
}


/* ======================== */
/* ▶︎ 404 Not Found Page */
/* ======================== */
#error-404 {
  padding: 80px 20px;
  text-align: center;
  background: linear-gradient(135deg, #f0f4ff, #e0ecff);
}

#error-404 .inner {
  max-width: 800px;
  margin: 0 auto;
}

.error-code {
  font-size: 96px;
  font-weight: bold;
  color: #41a4fd;
  margin-bottom: 20px;
}

.error-message {
  font-size: 24px;
  margin-bottom: 20px;
}

.error-subtext {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 40px;
}

.btn-home {
  display: inline-block;
  background-color: #41a4fd;
  color: #fff;
  font-weight: bold;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-home:hover {
  background-color: #2c90e8;
}

/* ▶︎ Responsive */
@media screen and (max-width: 768px) {
  .error-code {
    font-size: 64px;
  }

  .error-message {
    font-size: 20px;
  }

  .error-subtext {
    font-size: 15px;
  }
}

@media screen and (min-width: 768px) {
	
	.btn-entry-wrap .btn-entry div .en{
		color:#FFF!important;
	}
	
	.btn-entry-wrap .btn-entry div .ja{
		color:#FFF!important;
	}
	
	a.btn-entry .fa-solid.fa-arrow-right{
		color: #000 !important;
		
	}	
	
		a.btn-entry:hover .fa-solid.fa-arrow-right{
		color: #FFF !important;
		
	}	
	
	
	.arrow{
		background:#000 !important;
	}
  
  #global-navi #gnavi-inner-placeholder a.btn-entry .arrow{background:#FFF!important;}
  
	
	a.btn-entry:hover .arrow{
		background:#000!important;
	}

#global-navi #gnavi-inner-placeholder a.btn-entry:hover .arrow{background:#000!important;}
	
	a.btn-entry:hover div .en{
		color:#000!important;
	}
	
	a.btn-entry:hover div .ja{
		color:#000!important;
	}
	
  .js-toggle-gnav span::before {
    bottom: -6px;
    font-size: clamp(0px, 0.9722222222vw, 16.6px);
  }
	
	#global-navi #gnavi-inner-placeholder a.btn-entry .arrow i{
		color:#000!important;
	}
	
		#global-navi #gnavi-inner-placeholder a.btn-entry:hover .arrow i{
		color:#FFF!important;
	}
	
	}


@media screen and (min-width: 768px) {
	.d-none{
		display:block;
	}
	
	img.js-static-size {
  position: absolute;
  right: 0;
  max-width: 550px;
  top: 18%;
}
	
}

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





<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube埋め込みフルスクリーン表示（サムネイル版）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
        }

        /* フルスクリーンセクション */
        .fullscreen-section {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* YouTube埋め込みコンテナ */
        .youtube-container {
            position: relative;
            width: 100%;
            height: 100%;
            background: #000;
            cursor: pointer;
        }

        /* サムネイル画像 */
        .video-thumbnail {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100vw;
            height: 56.25vw; /* 16:9 アスペクト比 */
            min-height: 100vh;
            min-width: 177.78vh; /* 16:9 アスペクト比 */
            transform: translate(-50%, -50%);
            object-fit: cover;
            transition: opacity 0.3s ease;
        }

        .video-thumbnail.hide {
            opacity: 0;
            pointer-events: none;
        }

        /* YouTube埋め込み（初期は非表示） */
        .youtube-embed {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100vw;
            height: 56.25vw; /* 16:9 アスペクト比 */
            min-height: 100vh;
            min-width: 177.78vh; /* 16:9 アスペクト比 */
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .youtube-embed.show {
            opacity: 1;
        }

        .youtube-embed iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* 再生ボタンオーバーレイ */
        .play-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 50%;
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            border: 3px solid rgba(255, 255, 255, 0.3);
        }

        .play-overlay:hover {
            background: rgba(255, 0, 0, 0.9);
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .play-overlay.hide {
            opacity: 0;
            pointer-events: none;
        }

        /* 再生ボタン（三角形） */
        .play-button {
            width: 0;
            height: 0;
            border-left: 30px solid white;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            margin-left: 8px;
        }

        /* ローディングスピナー */
        .loading-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 15;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .loading-spinner.show {
            opacity: 1;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-top: 5px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* オーバーレイテキスト */
        .overlay-content {
            position: absolute;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            color: white;
            z-index: 10;
            background: rgba(0, 0, 0, 0.6);
            padding: 1.5rem 2rem;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            transition: opacity 0.3s ease;
        }

        .overlay-content.hide {
            opacity: 0;
        }

        .overlay-content h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        }

        .overlay-content p {
            font-size: 1.1rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        }

        /* 別のセクション */
        .normal-section {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .normal-section h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            color: #333;
        }

        .normal-section p {
            font-size: 1.1rem;
            color: #666;
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }

        /* 通常サイズのYouTube埋め込み */
        .normal-youtube {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 2rem auto;
            aspect-ratio: 16 / 9;
            background: #000;
            border-radius: 10px;
            overflow: hidden;
        }

        .normal-youtube .video-thumbnail {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: pointer;
        }

        .normal-youtube .play-overlay {
            width: 80px;
            height: 80px;
        }

        .normal-youtube .play-button {
            border-left: 24px solid white;
            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
            margin-left: 6px;
        }

        .normal-youtube .youtube-embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: none;
            min-width: auto;
            min-height: auto;
        }

        /* スクロールインジケーター */
        .scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            text-align: center;
            z-index: 10;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-10px);
            }
            60% {
                transform: translateX(-50%) translateY(-5px);
            }
        }

        .scroll-indicator svg {
            width: 24px;
            height: 24px;
            fill: white;
        }

        /* モバイル対応 */
        @media (max-width: 768px) {
            /* モバイルでは背景の高さも動画に合わせる */
            .fullscreen-section {
                height: 56.25vw; /* 16:9 アスペクト比に合わせて背景高さを調整 */
                min-height: 50vh; /* 最小高さを設定 */
                max-height: 60vh; /* 最大高さを制限 */
                background: transparent; /* 黒背景を削除 */
                /* スマホ専用余白を追加 */
                padding: clamp(0px, 5.3333333333vw, 28px) clamp(0px, 13.3333333333vw, 70px);
            }

            /* モバイルでは動画全体が見えるように調整 */
            .youtube-embed {
                width: 100%;
                height: 56.25vw; /* 16:9 アスペクト比を維持 */
                min-height: auto;
                min-width: auto;
                max-height: none; /* max-heightを削除 */
            }

            .video-thumbnail {
                width: 100%;
                height: 56.25vw; /* 16:9 アスペクト比を維持 */
                min-height: auto;
                min-width: auto;
                max-height: none; /* max-heightを削除 */
                object-fit: contain; /* 動画全体が見えるように */
            }

            /* モバイル用背景色を削除 */
            .youtube-container {
                background: transparent; /* 黒背景を削除 */
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%; /* 親要素の高さに合わせる */
                width: 100%; /* 幅を100%に調整 */
            }

            .overlay-content h1 {
                font-size: 2rem;
            }
            
            .overlay-content p {
                font-size: 1rem;
            }
            
            .overlay-content {
                padding: 1rem 1.5rem;
                bottom: 10%;
            }

            .play-overlay {
                width: 80px;
                height: 80px;
            }

            .play-button {
                border-left: 24px solid white;
                border-top: 16px solid transparent;
                border-bottom: 16px solid transparent;
                margin-left: 6px;
            }

            /* スクロールインジケーターの位置調整 */
            .scroll-indicator {
                bottom: 1rem;
            }
        }

        /* 縦向きスマホ専用設定 */
        @media (max-width: 768px) and (orientation: portrait) {
            .fullscreen-section {
                height: 56.25vw; /* 動画のアスペクト比に合わせる */
                min-height: 45vh;
                max-height: 55vh;
                background: #FBC400; /* 黒背景を削除 */
                /* 縦向きスマホ専用余白 */
                padding: clamp(0px, 13.3333333333vw, 70px) clamp(0px, 5.3333333333vw, 18px);
                margin-top: -70px;
            }

            .youtube-embed {
                width: 100%;
                height: 56.25vw;
                min-height: auto;
                min-width: auto;
            }

            .video-thumbnail {
                width: 100%;
                height: 56.25vw;
                min-height: auto;
                min-width: auto;
                object-fit: contain;
            }
        }

        /* 横向きスマホ用設定 */
        @media (max-width: 768px) and (orientation: landscape) {
            .fullscreen-section {
                height: 56.25vw; /* 動画のアスペクト比に合わせる */
                min-height: 70vh;
                max-height: 85vh;
                background: transparent; /* 黒背景を削除 */
                /* 横向きスマホ専用余白 */
                padding: clamp(0px, 5.3333333333vw, 28px) clamp(0px, 13.3333333333vw, 70px);
            }

            .youtube-embed {
                width: 100%;
                height: 56.25vw;
                min-height: auto;
                min-width: auto;
            }

            .video-thumbnail {
                width: 100%;
                height: 56.25vw;
                min-height: auto;
                min-width: auto;
                object-fit: contain;
            }
        }