@charset "UTF-8";
/* ========================
  Foundation
======================== */
/* ========================
    Foundation
======================== */
*,
::before,
::after {
  --clamp-root-font-size: 16;
  --clamp-slope: calc(
    (var(--clamp-max) - var(--clamp-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --clamp-y-axis-intersection: calc(
    var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min))
  );
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) +
      (var(--clamp-slope) * 100vw)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );
  font-size: var(--clamp);
}

:root {
  --color-rsk-green: #009f4f;
  --color-rsk-red: #e72410;
  --color-text-black: #231815;
  --color-gray: #616161;
  --color-bg-gray: #e5e5e5;
  --color-shadow-gray: #bebebe;
  --color-lightgreen: #009f4f;
  --inline-size: min(1200px, 100% - 2rem);
  --inline-size-lg: min(1200px, 100% - 4rem);
  --margin-bottom: 1rem;
  --margin-bottom-md: 2rem;
  --margin-bottom-lg: 5rem;
  --text-shadow: 1px 1px 0 #fff, -1px 0 0 #fff, 1px 1px 0 #fff, 0 -1px 0 #fff,
    0 1px 0 #fff, 1px -1px 0 #fff, 1px 0 0 #fff, 1px 1px 0 #fff, 1px 0px 0 #fff,
    0px 1px 0 #fff, 1px 1px 0 #fff;
}

body {
  font-family: "Zen Kaku Gothic New", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text--black);
  line-height: 1.7;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1200;
  --clamp-min: 16;
  --clamp-max: 18;
}

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

main {
  overflow: clip;
  position: relative;
}
main::after {
  position: absolute;
  content: "";
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-gray);
  z-index: -2;
}

@media (max-width: 767px) {
  section {
    scroll-margin-top: 60px;
  }
}

section:not(:last-of-type) {
  margin-bottom: 5rem;
}
@media (min-width: 768px) {
  section:not(:last-of-type) {
    margin-bottom: 9rem;
  }
}

.section-title {
  letter-spacing: 4px;
  margin-bottom: var(--margin-bottom);
}
.section-title .eijititle-text {
  --clamp-min: 16;
  --clamp-max: 22;
  font-weight: 400;
  letter-spacing: 2px;
  position: relative;
}
.section-title .eijititle-text::after {
  position: absolute;
  content: "";
  bottom: 40%;
  height: 1px;
  width: 35px;
  background-color: currentColor;
  rotate: -30deg;
  margin-left: -13px;
}

h1,
h2 {
  --clamp-min: 32;
  --clamp-max: 50;
  font-weight: 500;
  color: currentColor;
}

h3 {
  --clamp-min: 28;
  --clamp-max: 32;
  font-weight: 500;
}

.pc-only {
  display: none;
}
@media (min-width: 768px) {
  .pc-only {
    display: block;
  }
}

.sp-only {
  display: block;
}
@media (min-width: 768px) {
  .sp-only {
    display: none;
  }
}

@media (any-hover: hover) {
  .hover-line:hover {
    background-position: bottom right;
    background-size: 0% 1px;
  }
}
.hover-line:focus-visible {
  background-position: bottom right;
  background-size: 0% 1px;
}

.fadeIn {
  -webkit-mask-size: 300% 300%;
          mask-size: 300% 300%;
  -webkit-mask-position: 130% 130%;
          mask-position: 130% 130%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

a:not(.hover-line,
.pagetop,
.entry-link,
.link-profile,
.link-profile-viewmore,
.footer-nav-list a,
.message-movie) {
  transition: opacity 0.3s;
}
@media (any-hover: hover) {
  a:not(.hover-line,
  .pagetop,
  .entry-link,
  .link-profile,
  .link-profile-viewmore,
  .footer-nav-list a,
  .message-movie):hover {
    opacity: 0.7;
  }
}
a:not(.hover-line,
.pagetop,
.entry-link,
.link-profile,
.link-profile-viewmore,
.footer-nav-list a,
.message-movie):focus-visible {
  opacity: 0.7;
}

.hero {
  container: hero-layout/inline-size;
  position: relative;
  margin-bottom: var(--margin-bottom-lg);
}
@media (min-width: 768px) {
  .hero {
    height: 100svh;
  }
}
.hero-fv {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: 1rem;
}
@container hero-layout (min-width: 768px) {
  .hero-fv {
    position: absolute;
    top: 0;
    right: 0;
  }
}
@container hero-layout (min-width: 768px) and (max-width: 1200px) {
  .hero-fv {
    width: 90%;
  }
}
.hero-fv::before {
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 0 100svh 100svh 0;
  background-repeat: no-repeat;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 50svh;
  left: -5%;
  bottom: -8vh;
  z-index: -1;
}
@media (min-width: 768px) {
  .hero-fv::before {
    height: 90svh;
    left: -35%;
    bottom: -16vh;
  }
}
.hero-fv img {
  border-bottom-left-radius: 20svh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top 0 right 50%;
     object-position: top 0 right 50%;
  filter: drop-shadow(0 6px 8px var(--color-shadow-gray));
  margin-left: auto;
  width: 100vw;
  height: 80svh;
}
@container hero-layout (min-width: 768px) and (max-width: 1023px) {
  .hero-fv img {
    width: auto;
    height: 90svh;
    border-radius: 60% 0 0 60%;
  }
}
@container hero-layout (min-width: 1024px) and (max-width: 1535px) {
  .hero-fv img {
    width: auto;
    height: auto;
    border-radius: 100svh 0 0 100svh;
  }
}
@container hero-layout (min-width: 1536px) {
  .hero-fv img {
    width: auto;
    height: 100svh;
    border-radius: 100svh 0 0 100svh;
  }
}

@container hero-layout (max-width: 767px) {
  #page-index .hero-fv img {
    height: 70svh;
  }
}

.another-hero {
  display: grid;
  justify-content: start;
  align-content: center;
  align-items: center;
  -moz-column-gap: 4vw;
       column-gap: 4vw;
  height: 80svh;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .another-hero {
    grid-template-columns: auto auto;
    align-content: center;
    margin-inline: auto;
    width: var(--inline-size-lg);
  }
}
@media (min-width: 768px) and (max-width: 1366px) {
  .another-hero {
    height: 70svh;
    justify-content: center;
  }
}
@media (min-width: 1366px) {
  .another-hero {
    height: 60svh;
  }
}

/* ========================
  Layout
======================== */
/* ========================
  Foundation
======================== */
:root {
  --header-width: clamp(7rem, -3.403rem + 16.204vw, 8.75rem);
  --header-height: clamp(7rem, 6svh, 8.75rem);
  --header-offset: clamp(1rem, 2vw + 0.5rem, 3rem);
  --header-top-sh: clamp(1rem, 2svh + 0.5rem, 3rem);
}

.header {
  position: fixed;
  top: var(--header-offset);
  left: var(--header-offset);
  right: var(--header-offset);
  z-index: 20000;
}
@media (min-width: 768px) and (max-height: 800px) {
  .header {
    top: var(--header-top-sh);
  }
}

.recruit-brand {
  position: absolute;
  inset: 0;
}
.recruit-brand .pagetop {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  gap: 0.5rem;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 768px) {
  .recruit-brand .pagetop {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.recruit-brand .pagetop .logo-recruit {
  width: 80px;
}
@media (min-width: 768px) {
  .recruit-brand .pagetop .logo-recruit {
    width: var(--header-width);
  }
}
@media (min-width: 768px) and (max-height: 800px) {
  .recruit-brand .pagetop .logo-recruit {
    width: var(--header-height);
  }
}
.recruit-brand .pagetop .newgrad {
  --clamp-min: 13;
  --clamp-max: 22;
  text-align: center;
  font-weight: 500;
  letter-spacing: 2px;
}
@media (min-width: 768px) and (max-height: 800px) {
  .recruit-brand .pagetop .newgrad {
    --clamp-max: 20;
  }
}

.link-menu {
  --clamp-min: 17;
  --clamp-max: 25;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: end;
  gap: 8px;
  color: #fff;
  font-weight: 400;
}
@media (min-width: 768px) {
  .link-menu {
    gap: 1rem;
  }
}

.entry-link,
.nav-link {
  position: relative;
  isolation: isolate;
  background-color: color-mix(in srgb, #000 15%, transparent);
  transition: width 0.3s ease;
}
.entry-link::before,
.nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  mix-blend-mode: multiply;
  box-shadow: 1px 1px 9px var(--color-gray);
  transition: width 0.3s ease;
}

.entry-link {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-content: center;
  place-items: center;
  -moz-column-gap: 20px;
       column-gap: 20px;
  border-radius: 100svh;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .entry-link {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    border-radius: 50%;
    aspect-ratio: 1;
    width: var(--header-width);
  }
}
@media (min-width: 768px) and (max-height: 800px) {
  .entry-link {
    width: var(--header-height);
  }
}
.entry-link::before {
  border-radius: 100svh;
  background-color: color-mix(in srgb, var(--color-rsk-red) 85%, transparent);
}
@media (min-width: 768px) {
  .entry-link::before {
    border-radius: 50%;
    aspect-ratio: 1;
    width: var(--header-width);
  }
}
@media (min-width: 768px) and (max-height: 800px) {
  .entry-link::before {
    width: var(--header-height);
  }
}
.entry-link img {
  width: 7px;
}
@media (min-width: 768px) {
  .entry-link img {
    width: 9px;
  }
}

.nav-link {
  display: grid;
  border-radius: 50%;
  aspect-ratio: 1;
}
@media (min-width: 768px) {
  .nav-link {
    width: var(--header-width);
  }
}
@media (min-width: 768px) and (max-height: 800px) {
  .nav-link {
    width: var(--header-height);
  }
}
.nav-link::before {
  border-radius: 50%;
  aspect-ratio: 1;
  background-color: color-mix(in srgb, var(--color-rsk-green) 90%, transparent);
}
@media (min-width: 768px) {
  .nav-link::before {
    width: var(--header-width);
  }
}
@media (min-width: 768px) and (max-height: 800px) {
  .nav-link::before {
    width: var(--header-height);
  }
}
.nav-link .nav-button {
  display: grid;
  grid-template-rows: repeat(3, auto);
  align-content: center;
  justify-items: center;
  border-width: 0;
  padding: 8px;
  border-radius: 50%;
  aspect-ratio: 1;
  cursor: pointer;
}
@media (min-width: 768px) {
  .nav-link .nav-button {
    gap: 0.3rem;
  }
}
.nav-link .nav-button::before, .nav-link .nav-button::after {
  content: "";
  width: 22px;
  height: 1px;
  background-color: #fff;
  border-radius: 1px;
  margin-block: 3px;
  transition: translate 0.3s ease, rotate 0.3s ease, background-color 0.3s ease;
}
@media (min-width: 768px) {
  .nav-link .nav-button::before, .nav-link .nav-button::after {
    width: 40px;
  }
}
.nav-link .nav-button::before {
  grid-row: 2;
}
.nav-link .nav-button::after {
  grid-row: 3;
}
@media (max-width: 767px) {
  .nav-link .visually {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-link .visually {
    grid-row: 1;
  }
}

.entry,
.visually {
  text-box: trim-both;
}

.global-nav {
  position: fixed;
  right: -100vw;
  top: 70px;
  padding-inline: 1rem;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  scrollbar-color: var(--color-shadow-gray) #fff;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  z-index: 1000;
  translate: 100% 0;
  transition: translate 0.3s ease;
}
@media (min-width: 768px) {
  .global-nav {
    top: 170px;
    padding-inline: 2rem;
    max-height: calc(100vh - 200px);
  }
}

.global-nav-list {
  display: grid;
  justify-items: start;
  row-gap: 0.5rem;
  font-weight: 400;
  line-height: 2;
  max-height: 100vh;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .global-nav-list {
    row-gap: 1rem;
  }
}
.global-nav-list .main-menu {
  position: relative;
}
.global-nav-list .main-menu::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 0.3s;
}
@media (any-hover: hover) {
  .global-nav-list .main-menu:hover::after {
    transform: scale(1, 1);
  }
}
.global-nav-list .main-menu:focus-visible::after {
  transform: scale(1, 1);
}
.global-nav-list .sub-menu a,
.global-nav-list .solo-link {
  color: var(--color-gray);
  font-size: 15px;
}
.global-nav-list .sub-menu a {
  display: grid;
  grid-template-columns: auto auto 1fr;
  justify-content: start;
  align-items: center;
  margin-left: 0.5rem;
  transition: color 0.3s;
}
.global-nav-list .sub-menu a::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--color-lightgreen);
}
.global-nav-list .sub-menu a::after {
  grid-area: 1/-3;
  content: "";
  width: 0.5rem;
  height: 1px;
  background-color: var(--color-lightgreen);
  margin-right: 0.5rem;
}
.global-nav-list .sub-menu li:last-child a::before {
  content: "";
  width: 1px;
  height: 100%;
  background: linear-gradient(var(--color-lightgreen) 52%, transparent 52%);
}
.global-nav-list .solo-link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  margin-left: 0.5rem;
}
.global-nav-list .solo-link::before {
  content: "";
  width: 0.7rem;
  aspect-ratio: 1;
  background-image: url(../img/allow_green.svg);
  background-repeat: no-repeat;
}
.global-nav-list .sub-menu a,
.global-nav-list .solo-link {
  transition: color 0.3s;
}
@media (any-hover: hover) {
  .global-nav-list .sub-menu a:hover,
  .global-nav-list .solo-link:hover {
    color: var(--color-shadow-gray);
  }
}
.global-nav-list .sub-menu a:focus-visible,
.global-nav-list .solo-link:focus-visible {
  color: var(--color-shadow-gray);
}

.nav-pagetop {
  position: fixed;
  right: 1rem;
  bottom: 0;
  z-index: 10000;
}
@media (min-width: 768px) {
  .nav-pagetop {
    right: 1.5rem;
    bottom: 1rem;
  }
}
.nav-pagetop svg {
  rotate: 270deg;
}
@media (max-width: 767px) {
  .nav-pagetop svg {
    width: 35px;
  }
}

/* メニューが開いた時のスタイル */
#container {
  transition: translate 0.3s ease;
}

.menu-open #container {
  translate: -200px 60px;
  box-shadow: 0 8px 40px -10px hsla(0, 0%, 0%, 0.8);
}
@media (min-width: 768px) {
  .menu-open #container {
    translate: -300px 60px;
  }
}

.menu-open .global-nav {
  translate: -10px 0;
  right: 0;
}
@media (min-width: 768px) {
  .menu-open .global-nav {
    translate: -75px 0;
  }
}

.menu-open .link-nav {
  translate: none;
  opacity: 1;
}

@media (min-width: 768px) {
  .menu-open .nav-button::before,
  .menu-open .nav-button::after {
    width: 30px;
  }
}

.menu-open .nav-button::before {
  rotate: 45deg;
  translate: 0 4px;
}
@media (min-width: 768px) {
  .menu-open .nav-button::before {
    translate: 0 6px;
  }
}

.menu-open .nav-button::after {
  rotate: -45deg;
  translate: 0 -3px;
}
@media (min-width: 768px) {
  .menu-open .nav-button::after {
    translate: 0 -6px;
  }
}

.global-nav__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s;
  cursor: pointer;
  z-index: 200;
}

.menu-open .global-nav__cover {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 768px) {
  .menu-open .entry-link,
  .menu-open .nav-link,
  .menu-open .entry-link::before,
  .menu-open .nav-link::before {
    width: 110px;
  }
}

.menu-open .header-container {
  grid-template-columns: 1fr;
  justify-items: end;
  row-gap: 1rem;
}
@media (min-width: 768px) {
  .menu-open .header-container {
    justify-content: end;
  }
}

@media (min-width: 768px) {
  .menu-open .recruit-brand {
    display: none;
  }
}
@media (max-width: 767px) {
  .menu-open .recruit-brand {
    grid-row: 2;
  }
}

@media (max-width: 767px) {
  .menu-open .link-menu {
    grid-row: 1;
  }
}

/* ========================
   Foundation
======================== */
.footer {
  line-height: 2;
  font-weight: 400;
  background-color: #fff;
  filter: drop-shadow(6px 0 8px var(--color-shadow-gray));
  padding-bottom: 1rem;
}
.footer-nav, .footer-sitemap-list {
  width: var(--inline-size);
  margin-inline: auto;
  padding-block: 3rem;
}
.footer-nav {
  display: grid;
  justify-items: center;
  align-items: end;
  gap: 2rem;
}
@media (min-width: 768px) {
  .footer-nav {
    grid-template-columns: 1fr auto;
    justify-items: revert;
  }
}
.footer-nav-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: start;
  gap: 1rem;
}
@media (min-width: 768px) {
  .footer-nav-list {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 2rem;
  }
}
.footer-nav-list .main-menu {
  position: relative;
}
.footer-nav-list .main-menu::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 0.3s;
}
@media (any-hover: hover) {
  .footer-nav-list .main-menu:hover::after {
    transform: scale(1, 1);
  }
}
.footer-nav-list .main-menu:focus-visible::after {
  transform: scale(1, 1);
}
.footer-nav-list .sub-menu a,
.footer-nav-list .solo-link {
  color: var(--color-gray);
  font-size: 15px;
}
.footer-nav-list .sub-menu a {
  display: grid;
  grid-template-columns: auto auto 1fr;
  justify-content: start;
  align-items: center;
  margin-left: 0.5rem;
}
.footer-nav-list .sub-menu a::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--color-lightgreen);
}
.footer-nav-list .sub-menu a::after {
  grid-area: 1/-3;
  content: "";
  width: 0.5rem;
  height: 1px;
  background-color: var(--color-lightgreen);
  margin-right: 0.5rem;
}
.footer-nav-list .sub-menu li:last-child a::before {
  content: "";
  width: 1px;
  height: 100%;
  background: linear-gradient(var(--color-lightgreen) 52%, transparent 52%);
}
.footer-nav-list .solo-link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  margin-left: 0.5rem;
}
.footer-nav-list .solo-link::before {
  content: "";
  width: 0.7rem;
  aspect-ratio: 1;
  background-image: url(../img/allow_green.svg);
  background-repeat: no-repeat;
}
.footer-nav-list .sub-menu a,
.footer-nav-list .solo-link {
  transition: color 0.3s;
}
@media (any-hover: hover) {
  .footer-nav-list .sub-menu a:hover,
  .footer-nav-list .solo-link:hover {
    color: var(--color-shadow-gray);
  }
}
.footer-nav-list .sub-menu a:focus-visible,
.footer-nav-list .solo-link:focus-visible {
  color: var(--color-shadow-gray);
}
.footer-logo .instagram {
  display: block;
  text-align: center;
  border: solid 1px var(--color-shadow-gray);
  border-radius: 100svh;
  padding: 0.5rem;
  margin-bottom: var(--margin-bottom);
}
.footer-logo .instagram img {
  display: inline;
  vertical-align: bottom;
  width: min(35px, 100%);
  margin-right: 0.5rem;
}
.footer-logo .index {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .footer-logo .index {
    margin-inline: auto 0;
  }
}
.footer-sitemap {
  color: var(--color-gray);
  border-top: 1px solid var(--color-bg-gray);
}
.footer-sitemap-list {
  --clamp-min: 12;
  --clamp-max: 16;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  row-gap: 1rem;
}
@media (min-width: 768px) {
  .footer-sitemap-list {
    grid-template-columns: repeat(6, auto);
    justify-content: start;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
.footer .copyright {
  color: var(--color-gray);
  text-align: center;
}
.footer .copyright small {
  font-size: 13px;
}

/* ========================
  Page
======================== */
/* ========================
  Foundation
======================== */
#page-index {
  font-weight: 500;
}
#page-index section:nth-child(even) .eijititle-text {
  color: var(--color-rsk-green);
}
#page-index section:nth-child(odd) .eijititle-text {
  color: var(--color-rsk-red);
}

#page-index #hero-section {
  /* fade-in animation */
}
#page-index #hero-section .hero-subtitle {
  margin-left: 4vw;
  filter: drop-shadow(0 0 3px #fff);
  z-index: 1;
}
@media (min-width: 768px) {
  #page-index #hero-section .hero-subtitle {
    position: absolute;
    bottom: 4vw;
  }
}
#page-index #hero-section .hero-subtitle .subtitle {
  width: 80vw;
  margin-bottom: var(--margin-bottom);
}
@media (min-width: 768px) {
  #page-index #hero-section .hero-subtitle .subtitle {
    width: min(850px, 100%);
  }
}
#page-index #hero-section .hero-subtitle .catchcopy {
  --clamp-min: 22;
  --clamp-max: 24;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: var(--text-shadow);
}
@media (min-width: 768px) {
  #page-index #hero-section .hero-subtitle .catchcopy {
    text-align: center;
  }
}
#page-index #hero-section .hero-subtitle .catchcopy span {
  --clamp-min: 24;
  --clamp-max: 27;
}
#page-index #hero-section .hero-subtitle .catchcopy .are {
  color: var(--color-rsk-green);
}
#page-index #hero-section .hero-subtitle .catchcopy .challenge {
  color: var(--color-rsk-red);
}
#page-index #hero-section .hero .slider {
  display: grid;
  grid-template-rows: 100%;
  pointer-events: none;
}
#page-index #hero-section .hero .slider li {
  grid-area: 1/1/-1/-1;
}
#page-index #hero-section .hero .slider .image01 img {
  -o-object-position: top 0 left 30%;
     object-position: top 0 left 30%;
}
@media (min-width: 768px) {
  #page-index #hero-section .hero .slider .image01 img {
    -o-object-position: top 0 left 20%;
       object-position: top 0 left 20%;
  }
}
#page-index #hero-section .hero .slider .image02 img {
  -o-object-position: top 0 left 0;
     object-position: top 0 left 0;
}
@media (min-width: 768px) {
  #page-index #hero-section .hero .slider .image02 img {
    -o-object-position: top 0 left 0;
       object-position: top 0 left 0;
  }
}
#page-index #hero-section .hero .slider .image03 img {
  -o-object-position: top 0 right 40%;
     object-position: top 0 right 40%;
}
@media (min-width: 768px) {
  #page-index #hero-section .hero .slider .image03 img {
    -o-object-position: top 0 right 50%;
       object-position: top 0 right 50%;
  }
}
#page-index #hero-section .hero .slider .image04 img {
  -o-object-position: top 0 right 50%;
     object-position: top 0 right 50%;
}
#page-index #hero-section .hero .slider .image05 img {
  -o-object-position: top 0 right 20%;
     object-position: top 0 right 20%;
}
@media (min-width: 768px) {
  #page-index #hero-section .hero .slider .image05 img {
    -o-object-position: top 0 right 20%;
       object-position: top 0 right 20%;
  }
}
#page-index #hero-section .hero-text {
  letter-spacing: 2px;
  width: var(--inline-size);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
#page-index #hero-section .hero-text .text-heading {
  --clamp-min: 22;
  --clamp-max: 30;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: var(--text-shadow);
  filter: drop-shadow(0 0 3px #fff);
  margin-bottom: var(--margin-bottom-md);
}
#page-index #hero-section .hero-text .text {
  --clamp-min: 18;
  --clamp-max: 22;
  line-height: 2;
}
#page-index #hero-section .subtitle-animation {
  opacity: 0;
  animation: subtitle-animation 0.7s ease-in-out forwards;
}
#page-index #hero-section .delay {
  animation-delay: 0.5s;
}
@keyframes subtitle-animation {
  from {
    translate: 0 30px;
  }
  to {
    translate: 0 0;
    opacity: 1;
  }
}

#aboutus-section {
  container: aboutus-layout/inline-size;
  position: relative;
}

#aboutus-section .container {
  display: grid;
  align-items: center;
  row-gap: 3rem;
}
@media (min-width: 768px) {
  #aboutus-section .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.aboutus-contents {
  --clamp-min: 18;
  --clamp-max: 22;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .aboutus-contents {
    width: clamp(20rem, 10rem + 28vw, 41.25rem);
  }
}
.aboutus-contents .aboutus-catchphrase,
.aboutus-contents .aboutus-text,
.aboutus-contents .aboutus-viewmore {
  margin-bottom: var(--margin-bottom);
}
@media (min-width: 768px) {
  .aboutus-contents .aboutus-catchphrase,
  .aboutus-contents .aboutus-text,
  .aboutus-contents .aboutus-viewmore {
    margin-bottom: var(--margin-bottom-md);
  }
}

.aboutus-inpage {
  margin-bottom: var(--margin-bottom);
}
.aboutus-inpage a {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  letter-spacing: 2px;
  background-image: linear-gradient(var(--color-rsk-green), var(--color-rsk-green));
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
  padding-block: 1rem;
  padding-inline: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  transition: background-size 0.3s;
}

.link-message {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  letter-spacing: 2px;
  background-image: linear-gradient(var(--color-rsk-green), var(--color-rsk-green));
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
  padding-block: 1rem;
  padding-inline: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  transition: background-size 0.3s;
  background-image: revert;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px var(--color-shadow-gray);
  padding: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  transition: background-color 0.3s;
}

.aboutus-image {
  grid-row: 1;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .aboutus-image {
    padding: revert;
  }
}
.aboutus-image img {
  border-radius: 0 47% 47% 0;
  filter: drop-shadow(0 6px 8px var(--color-shadow-gray));
}

#interview-section {
  container: interview-layout/inline-size;
  font-weight: 500;
  position: relative;
}

.interview-contents {
  --clamp-min: 18;
  --clamp-max: 22;
  display: grid;
  align-items: center;
  width: var(--inline-size);
  margin-inline: auto;
  margin-bottom: var(--margin-bottom);
}
@media (min-width: 768px) {
  .interview-contents {
    grid-template-columns: auto 1fr;
    gap: 3rem;
    margin-bottom: var(--margin-bottom-md);
  }
}

.interview-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .interview-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
}

.profile,
.profile-viewmore {
  container: profile-layout/inline-size;
  display: grid;
  background-color: #fff;
  position: relative;
  z-index: 1;
  overflow: clip;
}
.profile::after,
.profile-viewmore::after {
  position: absolute;
  content: "";
  inset: 10px;
  border: solid 1px color-mix(in srgb, var(--color-gray) 10%, transparent);
  z-index: -1;
}
@container profile-layout (min-width: 350px) {
  .profile::after,
  .profile-viewmore::after {
    inset: 30px;
  }
}

.profile-viewmore {
  place-items: center;
  background-color: revert;
}
.profile-viewmore::after {
  content: revert;
}
.profile-viewmore .link-profile-viewmore {
  position: relative;
  padding-bottom: 7px;
}
.profile-viewmore .link-profile-viewmore::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 0.3s;
}
@media (any-hover: hover) {
  .profile-viewmore .link-profile-viewmore:hover::after {
    transform: scale(1, 1);
  }
}
.profile-viewmore .link-profile-viewmore:focus-visible::after {
  transform: scale(1, 1);
}

.link-profile {
  display: grid;
  align-items: end;
  justify-items: end;
}
@media (any-hover: hover) {
  .link-profile .thumb {
    transition: scale 0.3s;
  }
  .link-profile .thumb:hover {
    scale: 1.07;
  }
}
.link-profile .thumb:focus-visible {
  scale: 1.07;
}

.card {
  padding-right: 0.3rem;
  text-align: right;
  grid-area: 1/1/-1/-1;
  z-index: 1;
}
@container profile-layout (min-width: 350px) {
  .card {
    padding-right: 3rem;
    padding-bottom: 3rem;
  }
}
.card .affiliation {
  --clamp-min: 14;
  --clamp-max: 20;
  color: #fff;
  line-height: 1.4;
  padding-inline: 0.1em;
  position: relative;
}
@container profile-layout (min-width: 350px) {
  .card .affiliation {
    padding-inline: 0.5em;
  }
}
.card .name {
  --clamp-min: 16;
  --clamp-max: 22;
  text-shadow: var(--text-shadow);
  filter: drop-shadow(0 0 2px #fff);
}

.link-profile-viewmore {
  --clamp-min: 16;
  --clamp-max: 22;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(2, auto);
  gap: 1rem;
  font-weight: 400;
  letter-spacing: 2px;
}

.thumb {
  grid-area: 1/1/-1/-1;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.profile:nth-of-type(odd) .affiliation::before,
.profile:nth-of-type(even) .affiliation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  mix-blend-mode: multiply;
}

.profile:nth-of-type(odd) .affiliation::before {
  background-color: color-mix(in srgb, var(--color-rsk-red) 85%, transparent);
}

.profile:nth-of-type(even) .affiliation::before {
  background-color: color-mix(in srgb, var(--color-rsk-green) 85%, transparent);
}

.link-viewmore__profile {
  background-color: var(--color-bg-gray);
}

#environment-section {
  container: environment-layout/inline-size;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  #environment-section {
    padding-bottom: 9rem;
  }
}

#environment-section .container {
  display: grid;
  align-items: end;
  justify-items: center;
  row-gap: 3rem;
  position: relative;
}
@media (min-width: 768px) {
  #environment-section .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
#environment-section .container::before {
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 0 50% 50% 0;
  background-repeat: no-repeat;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 75%;
  left: 0;
  bottom: -12%;
  z-index: -1;
}
@media (min-width: 768px) {
  #environment-section .container::before {
    width: 70%;
    left: -10%;
    height: 90%;
    bottom: -20%;
    border-radius: 0 100svh 100svh 0;
  }
}

.environment-contents {
  --clamp-min: 18;
  --clamp-max: 22;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .environment-contents {
    grid-row: revert;
    width: clamp(20rem, 10rem + 28vw, 41.25rem);
  }
}

.environment-text {
  margin-bottom: var(--margin-bottom);
}
@media (min-width: 768px) {
  .environment-text {
    margin-bottom: var(--margin-bottom-lg);
  }
}

.link-metrics,
.link-benefits {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  letter-spacing: 2px;
  background-image: linear-gradient(var(--color-rsk-green), var(--color-rsk-green));
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
  padding-block: 1rem;
  padding-inline: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  transition: background-size 0.3s;
}

.link-metrics {
  margin-bottom: var(--margin-bottom);
}

.environment-image {
  grid-row: 1;
  padding-left: 1rem;
}
@media (min-width: 768px) {
  .environment-image {
    grid-row: revert;
    padding-left: revert;
    margin-bottom: var(--margin-bottom-lg);
  }
}
.environment-image img {
  border-radius: 47% 0 0 47%;
  filter: drop-shadow(0 6px 8px var(--color-shadow-gray));
}

.aboutus-main {
  --aboutus-inlinesize: min(570px, 100% - 4rem);
  padding-bottom: 5rem;
  overflow: clip;
}
@media (min-width: 768px) {
  .aboutus-main {
    --aboutus-inlinesize: min(570px, 100% - 2rem);
    line-height: 2;
    padding-bottom: 9rem;
  }
}
.aboutus-main h1 {
  text-shadow: var(--text-shadow);
  filter: drop-shadow(0 0 2px #fff);
}
.aboutus-main .eijititle-text {
  color: var(--color-rsk-green);
  filter: drop-shadow(0 0 1px #fff);
}

.aboutus-hero {
  display: grid;
  align-items: center;
  font-weight: 500;
  letter-spacing: 2px;
}

.aboutus-heading {
  position: absolute;
  z-index: 1;
  width: var(--inline-size);
  padding: clamp(1rem, 2vw + 1rem, 4rem);
}
@media (min-width: 768px) {
  .aboutus-heading {
    margin-left: clamp(2vw, 20vw - 5rem, 20vw);
  }
}
@media (max-width: 767px) {
  .aboutus-heading {
    bottom: -6vh;
  }
}
.aboutus-heading h2,
.aboutus-heading .aboutus-text {
  text-shadow: var(--text-shadow);
  filter: drop-shadow(0 0 2px #fff);
}
.aboutus-heading .aboutus-text {
  width: min(700px, 100%);
}

#aboutus-company {
  position: relative;
}
#aboutus-company > .section-title {
  width: var(--inline-size);
  margin-inline: auto;
}

.company-article {
  display: grid;
  place-items: center;
}
@media (min-width: 768px) {
  .company-article {
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
.company-article:not(:last-of-type) {
  margin-bottom: var(--margin-bottom);
}
.company-article .company-text {
  grid-area: text;
  z-index: 1;
  width: var(--aboutus-inlinesize);
}
.company-article .company-image {
  grid-area: image;
  z-index: 0;
}
.company-article .company-image img {
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .company01 {
    grid-template-areas: "image text";
  }
}
@media (max-width: 767px) {
  .company01 {
    grid-template-areas: "image" "text";
  }
}
.company01 .company-image img {
  -webkit-mask-image: url(../img/aboutus/aboutus_r.svg);
          mask-image: url(../img/aboutus/aboutus_r.svg);
}

@media (min-width: 768px) {
  .company02 {
    grid-template-areas: "text image";
  }
}
@media (max-width: 767px) {
  .company02 {
    grid-template-areas: "image" "text";
  }
}
.company02 .company-image img {
  -webkit-mask-image: url(../img/aboutus/aboutus_s.svg);
          mask-image: url(../img/aboutus/aboutus_s.svg);
}

@media (min-width: 768px) {
  .company03 {
    grid-template-areas: "image text";
  }
}
@media (max-width: 767px) {
  .company03 {
    grid-template-areas: "image" "text";
  }
}
.company03 .company-image img {
  -webkit-mask-image: url(../img/aboutus/aboutus_k.svg);
          mask-image: url(../img/aboutus/aboutus_k.svg);
}

#aboutus-work {
  container: aboutus-work-layout/inline-size;
}

.work-contents {
  grid-template-areas: "title" "image" "text";
  display: grid;
  justify-items: center;
  row-gap: 1rem;
  position: relative;
}
@container aboutus-work-layout (min-width: 1024px) {
  .work-contents {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title image" "text image";
    row-gap: 2rem;
  }
}
@container aboutus-work-layout (min-width: 768px) and (max-width: 1023px) {
  .work-contents {
    align-items: center;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "title image" "text text";
    row-gap: 2rem;
  }
}
.work-contents::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  top: 30%;
  left: 0;
  z-index: -1;
  border-radius: 0 100svh 100svh 0;
  background-color: #fff;
  background-repeat: no-repeat;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 768px) {
  .work-contents::before {
    width: 60%;
    height: 90%;
    top: 19%;
  }
}
.work-contents .section-title {
  grid-area: title;
  width: var(--aboutus-inlinesize);
}
@container aboutus-work-layout (min-width: 768px) and (max-width: 1023px) {
  .work-contents .section-title {
    margin-top: auto;
  }
}
.work-contents .work-text {
  grid-area: text;
  padding-inline: 2rem;
  margin-bottom: var(--margin-bottom-md);
}
@container aboutus-work-layout (min-width: 1024px) {
  .work-contents .work-text {
    width: var(--aboutus-inlinesize);
    padding-inline: revert;
  }
}
.work-contents .work-text .text-heading {
  --clamp-min: 22;
  --clamp-max: 30;
  font-weight: 500;
}
.work-contents .work-image {
  grid-area: image;
}
@media (max-width: 767px) {
  .work-contents .work-image {
    margin-left: 1rem;
  }
}
.work-contents .work-image img {
  border-radius: 47% 0 0 47%;
  aspect-ratio: 640/537;
  -o-object-fit: cover;
     object-fit: cover;
}

.work-department {
  container: work-department-layout/inline-size;
  width: var(--inline-size);
  margin-inline: auto;
}

.department-item {
  display: grid;
  grid-template-columns: 1fr fit-content(4rem) 1fr;
}
@media (min-width: 768px) {
  .department-item:not(:last-of-type) {
    margin-bottom: var(--margin-bottom-lg);
  }
}
.department-item .department-image {
  grid-area: 1/1/span 2/span 3;
  margin-right: 1rem;
}
@media (min-width: 768px) {
  .department-item .department-image {
    width: clamp(500px, 50vw, 635px);
  }
}
.department-item .department-image img {
  border-radius: 15px;
}
@media (min-width: 768px) {
  .department-item .department-image img {
    border-radius: 30px;
  }
}
.department-item .department-text {
  grid-area: 3/1/span 1/span 3;
  z-index: 1;
  position: relative;
  top: -2rem;
  display: grid;
  place-content: center;
  width: var(--aboutus-inlinesize);
  margin-left: auto;
  background-color: color-mix(in srgb, #fff 70%, transparent);
  border-radius: 15px;
  filter: drop-shadow(0 0 8px var(--color-shadow-gray));
  padding: 1rem 2rem;
}
@container work-department-layout (min-width: 1170px) {
  .department-item .department-text {
    z-index: -1;
  }
}
@container work-department-layout (min-width: 950px) {
  .department-item .department-text {
    grid-area: 2/1/span 1/span 3;
    top: 2rem;
    padding: 3rem 5rem;
  }
}
@container work-department-layout (max-width: 610px) {
  .department-item .department-text {
    width: revert;
    margin-left: 1rem;
  }
}

.department-item:nth-child(odd) .number {
  color: var(--color-rsk-green);
}

.department-item:nth-child(even) .number {
  color: var(--color-rsk-red);
}

.topmessage-main {
  position: relative;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .topmessage-main {
    line-height: 2;
  }
}
.topmessage-main::before {
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 40svh 0 0 40svh;
  background-repeat: no-repeat;
  width: 90%;
  height: 60vh;
  right: 0;
  top: 50%;
  z-index: -1;
}
@media (min-width: 768px) {
  .topmessage-main::before {
    border-radius: 100svh 0 0 100svh;
    width: clamp(50%, 50% + (900px - 100vw) * 2, 80%);
    height: 100vh;
    top: 40%;
  }
}
.topmessage-main .eijititle-text {
  color: var(--color-rsk-green);
}

.topmessage-hero {
  container: topmessage-hero-layout/inline-size;
  display: grid;
  place-items: center;
}
.topmessage-hero .topmessage-heading {
  grid-area: 1/-1;
  z-index: 1;
  width: var(--inline-size-lg);
  margin-top: 20vh;
}
@media (min-width: 768px) {
  .topmessage-hero .topmessage-heading {
    margin: auto auto 8vw auto;
  }
}
.topmessage-hero .topmessage-heading h1 {
  color: #fff;
  filter: drop-shadow(0 0 3px #000);
}
.topmessage-hero .topmessage-fv {
  grid-area: 1/-1;
  z-index: -1;
}
.topmessage-hero .topmessage-fv img {
  height: 80svh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left 50% top 0%;
     object-position: left 50% top 0%;
  border-bottom-left-radius: 20svh;
  margin-left: 1rem;
  width: 100vw;
}
@container topmessage-hero-layout (min-width: 768px) and (max-width: 1439px) {
  .topmessage-hero .topmessage-fv img {
    border-bottom-left-radius: 20svh;
    height: 76svh;
    -o-object-position: center;
       object-position: center;
    margin-left: revert;
  }
}
@container topmessage-hero-layout (min-width: 1440px) {
  .topmessage-hero .topmessage-fv img {
    border-bottom-left-radius: 35svh;
    height: auto;
    -o-object-position: center;
       object-position: center;
    margin-left: revert;
  }
}

.topmessage-contents {
  width: var(--inline-size-lg);
  margin-inline: auto;
}
.topmessage-contents h2 {
  --clamp-min: 28;
  --clamp-max: 32;
}
.topmessage-contents h3 {
  --clamp-min: 22;
  --clamp-max: 30;
}

.topmessage-image {
  margin-bottom: var(--margin-bottom);
}
.topmessage-image img {
  border-radius: 15px;
  width: 100%;
}
@media (min-width: 768px) {
  .topmessage-image img {
    border-radius: 30px;
  }
}

.topmessage-text * {
  margin-bottom: var(--margin-bottom);
}

.topmessage-name {
  text-align: right;
}
.topmessage-name .president img {
  margin-left: auto;
  width: min(200px, 100%);
}
@media (min-width: 768px) {
  .topmessage-name .president img {
    width: min(250px, 100%);
  }
}

/* ========================
  Foundation
======================== */
/*-----------------------------------------*/
/*                 index                   */
/*-----------------------------------------*/
.interview-main {
  font-weight: 500;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .interview-main {
    padding-bottom: 9rem;
  }
}
.interview-main .eijititle-text {
  color: var(--color-rsk-red);
}
.interview-main #hero-section {
  position: relative;
  margin-left: 1rem;
}
@media (min-width: 768px) {
  .interview-main #hero-section {
    margin-left: revert;
  }
}
.interview-main #hero-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 76svh;
  background-color: #fff;
  border-bottom-left-radius: 20svh;
}
@media (min-width: 768px) {
  .interview-main #hero-section::before {
    border-bottom-left-radius: 35svh;
  }
}
@media (min-width: 768px) and (max-width: 1365px) {
  .interview-main #hero-section::before {
    height: 80svh;
  }
}
@media (min-width: 1366px) {
  .interview-main #hero-section::before {
    height: 60svh;
  }
}

#interview-message-section {
  container: message-contents-layout/inline-size;
  position: relative;
}
#interview-message-section .section-title {
  width: var(--inline-size);
  margin-inline: auto;
}

.message-contents {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 1fr minmax(auto, 3rem) 1fr;
  grid-template-rows: repeat(3, auto);
  border-radius: 15px;
  width: var(--inline-size);
  margin-inline: auto;
}
@container message-contents-layout (min-width: 960px) {
  .message-contents {
    grid-template-rows: 1fr minmax(auto, 3rem) auto;
  }
}
@media (min-width: 768px) {
  .message-contents {
    line-height: 2;
  }
}
@container message-contents-layout (min-width: 960px) {
  .message-contents .message-image {
    grid-area: 1/1/1/span 2;
    z-index: 1;
  }
}
@container message-contents-layout not (min-width: 960px) {
  .message-contents .message-image {
    grid-area: 1/1/1/span 3;
    z-index: -1;
    width: min(600px, 100%);
    margin-right: 1rem;
  }
}
.message-contents .message-text {
  font-weight: normal;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 3px var(--color-shadow-gray);
}
.message-contents .message-text .text-heading {
  --clamp-min: 20;
  --clamp-max: 28;
  font-weight: 500;
}
@container message-contents-layout (min-width: 960px) {
  .message-contents .message-text {
    grid-area: 2/2/span 1/span 3;
    padding: 4rem;
  }
}
@container message-contents-layout not (min-width: 960px) {
  .message-contents .message-text {
    grid-area: 2/1/span 1/span 3;
    z-index: 1;
    padding: 2rem 1rem;
    width: min(600px, 100%);
    margin: -2rem 0 2rem 1rem;
  }
}
.message-contents .message-movie {
  --color-pink: #dd3b6b;
  display: grid;
  grid-template-columns: auto 2fr;
  align-items: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  font-weight: normal;
  border-radius: 15px;
  background-color: #fff;
  outline: solid 1px var(--color-pink);
  outline-offset: 9px;
  width: min(450px, 100%);
  padding: 10px 1rem;
  margin-bottom: var(--margin-bottom);
  transition: background-color 0.3s;
}
@container message-contents-layout (min-width: 960px) {
  .message-contents .message-movie {
    grid-area: 3/1/span 1/span 2;
  }
}
@container message-contents-layout not (min-width: 960px) {
  .message-contents .message-movie {
    grid-area: 3/1/span 1/span 3;
    width: 90%;
  }
}
@media (any-hover: hover) {
  .message-contents .message-movie:hover {
    background-color: var(--color-bg-gray);
  }
}
.message-contents .message-movie:focus-visible {
  background-color: var(--color-bg-gray);
}
.message-contents .message-movie .movie-logo {
  width: 120px;
}
@media (min-width: 768px) {
  .message-contents .message-movie .movie-logo {
    width: 150px;
  }
}
.message-contents .message-movie .text-heading {
  color: var(--color-pink);
  font-size: 1.2em;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.message-contents .message-movie .text-heading span {
  display: grid;
  place-items: center;
  background-color: var(--color-pink);
  border-radius: 50%;
  aspect-ratio: 1;
  padding: 0.3em;
}
.message-contents .message-movie .info {
  display: grid;
}
.message-contents .message-movie .movie-btn {
  margin-left: auto;
}
.message-contents .message-image,
.message-contents img {
  border-radius: 15px;
}
.message-contents h2 {
  --clamp-min: 28;
  --clamp-max: 32;
}

#interview-section {
  container: interview-layout/inline-size;
  font-weight: 500;
  position: relative;
}

.interview-contents {
  --clamp-min: 18;
  --clamp-max: 22;
  display: grid;
  align-items: center;
  width: var(--inline-size);
  margin-inline: auto;
  margin-bottom: var(--margin-bottom);
}
@media (min-width: 768px) {
  .interview-contents {
    grid-template-columns: auto 1fr;
    gap: 3rem;
    margin-bottom: var(--margin-bottom-md);
  }
}

.interview-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .interview-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
}

.profile,
.profile-viewmore {
  container: profile-layout/inline-size;
  display: grid;
  background-color: #fff;
  overflow: clip;
  position: relative;
  z-index: 1;
}
.profile::after,
.profile-viewmore::after {
  position: absolute;
  content: "";
  inset: 10px;
  border: solid 1px color-mix(in srgb, var(--color-gray) 10%, transparent);
  z-index: -1;
}
@container profile-layout (min-width: 350px) {
  .profile::after,
  .profile-viewmore::after {
    inset: 30px;
  }
}

.profile-viewmore {
  place-items: center;
  background-color: revert;
}
.profile-viewmore::after {
  content: revert;
}
.profile-viewmore .link-profile-viewmore {
  position: relative;
  padding-bottom: 7px;
}
.profile-viewmore .link-profile-viewmore::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 0.3s;
}
@media (any-hover: hover) {
  .profile-viewmore .link-profile-viewmore:hover::after {
    transform: scale(1, 1);
  }
}
.profile-viewmore .link-profile-viewmore:focus-visible::after {
  transform: scale(1, 1);
}

.link-profile {
  display: grid;
  align-items: end;
  justify-items: end;
}
@media (any-hover: hover) {
  .link-profile .thumb {
    transition: scale 0.3s;
  }
  .link-profile .thumb:hover {
    scale: 1.07;
  }
}
.link-profile .thumb:focus-visible {
  scale: 1.07;
}

.card {
  padding-right: 0.3rem;
  text-align: right;
  grid-area: 1/1/-1/-1;
  z-index: 1;
}
@container profile-layout (min-width: 350px) {
  .card {
    padding-right: 3rem;
    padding-bottom: 3rem;
  }
}
.card .affiliation {
  --clamp-min: 14;
  --clamp-max: 20;
  color: #fff;
  line-height: 1.4;
  padding-inline: 0.1em;
  position: relative;
}
@container profile-layout (min-width: 350px) {
  .card .affiliation {
    padding-inline: 0.5em;
  }
}
.card .name {
  --clamp-min: 16;
  --clamp-max: 22;
  text-shadow: var(--text-shadow);
  filter: drop-shadow(0 0 2px #fff);
}

.link-profile-viewmore {
  --clamp-min: 16;
  --clamp-max: 22;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(2, auto);
  gap: 1rem;
  font-weight: 400;
  letter-spacing: 2px;
}

.thumb {
  grid-area: 1/1/-1/-1;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.profile:nth-of-type(odd) .affiliation::before,
.profile:nth-of-type(even) .affiliation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  mix-blend-mode: multiply;
}

.profile:nth-of-type(odd) .affiliation::before {
  background-color: color-mix(in srgb, var(--color-rsk-red) 85%, transparent);
}

.profile:nth-of-type(even) .affiliation::before {
  background-color: color-mix(in srgb, var(--color-rsk-green) 85%, transparent);
}

.link-viewmore__profile {
  background-color: var(--color-bg-gray);
}

/*-----------------------------------------*/
/*                 person                  */
/*-----------------------------------------*/
#interview-person .hero-fv img {
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
#interview-person .eijititle-text {
  color: var(--color-rsk-red);
}

.interview-person-main {
  padding-bottom: 5rem;
  overflow: clip;
  position: relative;
}
@media (min-width: 768px) {
  .interview-person-main {
    padding-bottom: 9rem;
    line-height: 2;
  }
}
.interview-person-main::before {
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 40svh 0 0 40svh;
  background-repeat: no-repeat;
  width: 90%;
  height: 70vh;
  right: 0;
  top: 28%;
  z-index: -1;
}
@media (min-width: 768px) {
  .interview-person-main::before {
    border-radius: 100svh 0 0 100svh;
    width: clamp(50%, 50% + (900px - 100vw) * 2, 80%);
    height: 100vh;
  }
}

.interview-person-hero {
  display: grid;
  align-items: center;
  font-weight: 500;
  letter-spacing: 2px;
}

.person-content {
  position: absolute;
  z-index: 1;
  bottom: -9vh;
  width: var(--inline-size);
  padding: clamp(1rem, 2vw + 1rem, 4rem);
}
@media (min-width: 768px) {
  .person-content {
    bottom: 4vh;
    margin-left: clamp(2vw, 20vw - 5rem, 20vw);
  }
}

.person-heading {
  color: var(--color-rsk-red);
  position: relative;
}
.person-heading::after {
  position: absolute;
  content: "";
  bottom: 40%;
  height: 1px;
  width: 35px;
  background-color: currentColor;
  rotate: -30deg;
  margin-left: -13px;
}

.person-comment {
  --clamp-min: 20;
  --clamp-max: 36;
  font-weight: 600;
  letter-spacing: 5px;
  margin-bottom: var(--margin-bottom-md);
  text-shadow: var(--text-shadow);
  filter: drop-shadow(0 0 2px #fff);
}

.person-profile .department {
  --clamp-min: 18;
  --clamp-max: 20;
  color: #fff;
  font-weight: 400;
  text-box-trim: trim-both;
  background-color: var(--color-rsk-red);
  width: -moz-fit-content;
  width: fit-content;
  margin-right: auto;
  padding-inline: 0.5em;
}
.person-profile .name {
  --clamp-min: 24;
  --clamp-max: 36;
  text-shadow: var(--text-shadow);
  filter: drop-shadow(0 0 2px #fff);
}
.person-profile .entry-info {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  justify-content: start;
  -moz-column-gap: 10px;
       column-gap: 10px;
  text-shadow: var(--text-shadow);
  filter: drop-shadow(0 0 2px #fff);
}
.person-profile .entry-info::before {
  content: "";
  width: 5vw;
  height: 1px;
  background-color: var(--color-shadow-gray);
}
.person-profile .entry-info span {
  font-size: smaller;
  color: var(--color-gray);
  padding-top: 5px;
}

.text-small .department {
  --clamp-min: 16;
  line-height: 1.4;
}

#story-contents {
  margin-bottom: 5rem;
}
@media (min-width: 1366px) {
  #story-contents {
    display: grid;
    grid-template-columns: clamp(200px, 20vw, 400px) 1fr;
    align-items: start;
    justify-items: center;
    padding-inline: 2rem;
    margin-bottom: 9rem;
    padding-top: 9rem;
  }
}

.toc {
  --clamp-height: clamp(7rem, 6vmax, 8.75rem);
  padding-inline: 1rem;
}
@media (max-width: 1365px) {
  .toc {
    display: none;
  }
}
@media (min-width: 1366px) {
  .toc {
    position: sticky;
    top: 210px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    scrollbar-color: var(--color-shadow-gray) #fff;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }
}
@media (min-width: 1366px) and (max-height: 800px) {
  .toc {
    --clamp-max: 16;
    position: sticky;
    top: 140px;
    max-height: calc(100vh - 140px);
  }
}
.toc *:not(:last-of-type) {
  margin-bottom: var(--margin-bottom);
}
@media (max-height: 800px) {
  .toc *:not(:last-of-type) {
    margin-bottom: 0.5rem;
  }
}

.toc-heading {
  text-indent: -1rem;
}

.toc-list {
  list-style-type: numeric;
  list-style-position: inside;
  text-indent: 2rem;
  margin-bottom: var(--margin-bottom-md);
  position: relative;
}
.toc-list::before {
  content: "";
  position: absolute;
  inset: 0;
  bottom: 17px;
  width: 1px;
  background-color: var(--color-lightgreen);
}
.toc-list li {
  position: relative;
}
.toc-list li::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background-color: var(--color-lightgreen);
}

@counter-style numeric {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  pad: 2 "0";
  suffix: " ";
}
.toc-list li.active {
  color: var(--color-lightgreen);
}

.toc-img {
  text-align: center;
}
.toc-img img {
  margin-inline: auto;
  width: 230px;
}

.story {
  container: story-layout/inline-size;
  width: var(--inline-size);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .story article img {
    border-radius: 30px;
  }
}
.story article img {
  border-radius: 15px;
  width: 100%;
}
.story article:not(:last-of-type) {
  margin-bottom: 5rem;
}
@media (min-width: 768px) {
  .story article:not(:last-of-type) {
    margin-bottom: 9rem;
  }
}

.story-title {
  letter-spacing: 2px;
}
.story-title * {
  margin-bottom: var(--margin-bottom);
}
.story-title h2 {
  --clamp-min: 16;
  --clamp-max: 20;
  font-weight: 400;
  position: relative;
}
.story-title h2::after {
  position: absolute;
  content: "";
  bottom: 40%;
  height: 1px;
  width: 35px;
  background-color: currentColor;
  rotate: -30deg;
  margin-left: -13px;
}
.story-title p {
  --clamp-min: 20;
  --clamp-max: 30;
  font-weight: 500;
}

.story article:nth-of-type(odd) h2 {
  color: var(--color-rsk-green);
}

.story article:nth-of-type(even) h2 {
  color: var(--color-rsk-red);
}

#story01 .story-text {
  margin-bottom: var(--margin-bottom-md);
}

.story-fail {
  container: story-fail-layout/inline-size;
}
@container story-fail-layout (max-width: 735px) and (min-width: 500px) {
  .story-fail .story-img img {
    aspect-ratio: 735/268;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media (min-width: 768px) {
  .story-fail .story-img {
    float: left;
    shape-outside: inset(0 0 round 15px 15px 15px 15px);
    margin-right: 2rem;
    width: clamp(200px, 30vw, 520px);
  }
}
@media (max-width: 767px) {
  .story-fail {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "title" "text";
    display: grid;
    gap: 1rem;
  }
  .story-fail .story-title {
    grid-area: title;
  }
  .story-fail .story-text {
    grid-area: text;
  }
  .story-fail .story-img {
    grid-area: image;
  }
}

.story-off {
  container: story-off-layout/inline-size;
  border: 1px solid var(--color-rsk-red);
  border-radius: 15px;
  padding: 1rem;
}
@media (min-width: 768px) {
  .story-off {
    padding: 2rem;
  }
  .story-off .story-img {
    float: right;
    shape-outside: inset(0 0 round 15px 15px 15px 15px);
    margin-left: 2rem;
    width: clamp(200px, 30vw, 520px);
  }
}
@media (max-width: 767px) {
  .story-off {
    display: grid;
    gap: 1rem;
    grid-template-areas: "title" "text" "image";
  }
  .story-off .story-title {
    grid-area: title;
  }
  .story-off .story-text {
    grid-area: text;
  }
  .story-off .story-img {
    grid-area: image;
  }
  .story-off .story-img img {
    width: 100%;
  }
}

.story-day {
  container: story-day-layout/inline-size;
  border-radius: 15px;
  background-color: #fff;
  padding: 2rem 1rem;
}
@media (min-width: 768px) {
  .story-day {
    padding: 2rem;
  }
}

@container story-day-layout (max-width: 788px) {
  .story-schedule {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@container story-day-layout (min-width: 788px) {
  .story-schedule {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
  }
}

.schedule-item {
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--color-bg-gray) 70%, #fff);
  padding: 1rem;
}
@media (min-width: 768px) {
  .schedule-item {
    padding: 2rem;
    border-radius: 15px;
  }
}
.schedule-item time {
  color: var(--color-rsk-green);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.schedule-item time::before {
  content: "";
  inset: 0;
  width: 20px;
  aspect-ratio: 1;
  background-image: url(../img/interview/clock_icon.svg);
  background-repeat: no-repeat;
}
.schedule-item span {
  font-size: smaller;
}

/* ラインのスタイル */
.schedule-item {
  position: relative;
}
.schedule-item::after {
  position: absolute;
  content: "";
  inset: 0;
  margin-block: auto;
  margin-left: -2rem;
  height: 2px;
  width: 2rem;
  background-color: var(--color-rsk-green);
}
@container story-day-layout (max-width: 788px) {
  .schedule-item::after {
    width: 1rem;
    margin-left: -1rem;
  }
}
@container story-day-layout (min-width: 976px) {
  .schedule-item:nth-of-type(4n + 1)::after {
    display: none;
  }
}
@container story-day-layout (min-width: 788px) and (max-width: 976px) {
  .schedule-item:nth-of-type(3n + 1)::after {
    display: none;
  }
}
@container story-day-layout (max-width: 788px) {
  .schedule-item:nth-of-type(odd)::after {
    display: none;
  }
}

.story-message {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  grid-template-areas: "title image" "text  image";
  position: relative;
}
.story-message::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  top: clamp(5px, 1vw, 2rem);
  width: 100%;
  border-radius: 15px;
  background-color: color-mix(in srgb, var(--color-rsk-red) 20%, transparent);
}
@container story-layout (max-width: 500px) {
  .story-message {
    grid-template-areas: "title title" "text  image";
    padding-top: 2rem;
    padding-left: 1rem;
  }
  .story-message::after {
    top: 0;
  }
}
.story-message .story-title {
  grid-area: title;
  padding-left: 2rem;
}
@container story-layout (max-width: 500px) {
  .story-message .story-title {
    padding-left: revert;
  }
}
.story-message .story-text {
  grid-area: text;
  padding-left: 2rem;
  margin-right: auto;
  margin-bottom: auto;
}
@container story-layout (max-width: 500px) {
  .story-message .story-text {
    padding-left: revert;
    padding-bottom: 2rem;
  }
}
.story-message .story-img {
  grid-area: image;
  width: 200px;
}
@container story-layout (max-width: 500px) {
  .story-message .story-img {
    width: 140px;
  }
}

.other-interview-list {
  display: flex;
}
.other-interview-list .profile {
  width: min(200px, 100%);
}
@media (min-width: 768px) {
  .other-interview-list .profile {
    width: min(400px, 100%);
  }
}

/* 矢印の調整 */
.splide {
  position: relative;
}

.splide__arrows {
  position: absolute;
  top: -30%;
  right: 2rem;
  display: flex;
  gap: 15px;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 768px) {
  .splide__arrows {
    top: -20%;
    left: 37%;
  }
}

.splide__arrow {
  position: static;
  background: none;
  border: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  opacity: initial !important;
}
.splide__arrow svg {
  width: 100%;
  height: 100%;
  fill: var(--color-rsk-red);
  transition: scale 0.3s;
}
@media (any-hover: hover) {
  .splide__arrow svg:hover {
    scale: 1.2;
  }
}
.splide__arrow svg:focus-visible {
  scale: 1.2;
}

/* ========================
    Foundation
======================== */
.entry-main {
  font-weight: 500;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .entry-main {
    line-height: 2;
    padding-bottom: 9rem;
  }
}
.entry-main #hero-section {
  position: relative;
  margin-left: 1rem;
  margin-bottom: 5rem;
}
@media (min-width: 768px) {
  .entry-main #hero-section {
    margin-left: revert;
    margin-bottom: 9rem;
  }
}
.entry-main #hero-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 76svh;
  background-color: #fff;
  border-bottom-left-radius: 20svh;
}
@media (min-width: 768px) {
  .entry-main #hero-section::before {
    border-bottom-left-radius: 35svh;
  }
}
@media (min-width: 768px) and (max-width: 1365px) {
  .entry-main #hero-section::before {
    height: 80svh;
  }
}
@media (min-width: 1366px) {
  .entry-main #hero-section::before {
    height: 60svh;
  }
}
.entry-main .eijititle-text {
  color: var(--color-rsk-red);
}
@media (min-width: 1366px) {
  .entry-main #entry-contents {
    display: grid;
    grid-template-columns: clamp(150px, 30vw, 300px) 1fr;
    align-items: start;
    justify-items: center;
    padding-inline: 2rem;
  }
}
.entry-main #entry-contents .entry-toc {
  font-weight: 400;
}
.entry-main #entry-contents .entry-toc *:not(:last-of-type) {
  margin-bottom: var(--margin-bottom);
}
@media (min-width: 1366px) {
  .entry-main #entry-contents .entry-toc {
    position: sticky;
    top: 400px;
    margin-inline: auto;
  }
}
@media (max-width: 1365px) {
  .entry-main #entry-contents .entry-toc {
    display: none;
  }
}
.entry-main #entry-contents .entry-toc .entry-toc-heading {
  text-indent: -2rem;
}
.entry-main #entry-contents .entry-toc .entry-toc-list {
  text-indent: 2rem;
  position: relative;
}
.entry-main #entry-contents .entry-toc .entry-toc-list::before {
  content: "";
  position: absolute;
  inset: 0;
  bottom: 17px;
  width: 1px;
  background-color: var(--color-lightgreen);
}
.entry-main #entry-contents .entry-toc .entry-toc-list li {
  position: relative;
}
.entry-main #entry-contents .entry-toc .entry-toc-list li::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background-color: var(--color-lightgreen);
}
.entry-main .entry-toc-list li.active {
  color: var(--color-lightgreen);
}
.entry-main .wrap-contents {
  width: var(--inline-size-lg);
  margin-inline: auto;
}
.entry-main .notes {
  --clamp-max: 14;
  --clamp-min: 16;
}
.entry-main .notes li {
  list-style-type: disc;
  list-style-position: inside;
  text-indent: -1em;
  padding-left: 1em;
  color: var(--color-gray);
}
.entry-main .notes li::marker {
  font-size: 10px;
  color: var(--color-rsk-red);
}
.entry-main .notes .reference-mark {
  list-style-type: "※";
}
.entry-main .notes .reference-mark::marker {
  font-size: 16px;
  color: currentColor;
}
.entry-main .color-green {
  color: var(--color-rsk-green);
}
.entry-main .color-red {
  color: var(--color-rsk-red);
}
.entry-main .outline-red {
  outline: solid 1px var(--color-rsk-red);
  outline-offset: 5px;
}
@media (min-width: 768px) {
  .entry-main .outline-red {
    outline-offset: 10px;
  }
}
.entry-main .outline-green {
  outline: solid 1px var(--color-rsk-green);
  outline-offset: 5px;
}
@media (min-width: 768px) {
  .entry-main .outline-green {
    outline-offset: 10px;
  }
}

.definition-list {
  display: grid;
  justify-items: start;
  align-items: baseline;
}
@media (min-width: 768px) {
  .definition-list {
    grid-template-columns: auto 1fr;
    justify-items: revert;
    gap: 0.5rem;
  }
}
.definition-list dt {
  text-align: center;
  text-box-trim: trim-both;
  border-radius: 100svh;
  border: solid 1px var(--color-bg-gray);
  padding-inline: 0.7rem;
}

.step-item {
  display: grid;
  align-items: end;
  justify-content: center;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num heading heading" "contents contents contents";
  border-radius: 15px;
  background-color: #fff;
  padding: 1rem;
  margin-bottom: 3rem;
  position: relative;
}
@media (min-width: 768px) {
  .step-item {
    grid-template-columns: clamp(100px, 10vw, 170px) 1fr;
    grid-template-areas: "num heading" "num contents";
    align-items: center;
    padding: 2rem;
  }
}
.step-item:not(:last-of-type)::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  aspect-ratio: 1;
  margin: auto auto -1.8rem;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  rotate: 135deg;
}
.step-item .step-num {
  --clamp-max: 48;
  --clamp-min: 30;
  grid-area: num;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.2;
  padding-right: 1rem;
}
.step-item .step-num span {
  --clamp-max: 20;
  --clamp-min: 15;
  display: block;
  color: var(--color-bg-gray);
  font-weight: 500;
}
.step-item .step-title {
  --clamp-min: 21;
  --clamp-max: 32;
  grid-area: heading;
  letter-spacing: 3px;
}
.step-item .step-title span {
  --clamp-min: 14;
  --clamp-max: 18;
  display: block;
  letter-spacing: 2px;
  border: solid 1px var(--color-bg-gray);
  border-radius: 100svh;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .step-item .step-title span {
    display: inline;
  }
}
.step-item .step-contents {
  grid-area: contents;
  letter-spacing: 1px;
}
@media (max-width: 767px) {
  .step-item .step-contents {
    margin-top: 1rem;
  }
}
.step-item .arc-btn {
  display: block;
  border: solid 1px currentColor;
  border-radius: 100svh;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.6em 1em;
  color: var(--color-rsk-red);
}
.step-item .arc-btn svg {
  rotate: 90deg;
  vertical-align: sub;
  width: 25px;
  margin-left: 0.5em;
}
@media (min-width: 767px) {
  .step-item .arc-btn svg {
    width: 30px;
  }
}

#howto-section .step-item {
  align-items: start;
}

#howto-section .announcer-list .step-item {
  align-items: center;
}

.complete {
  margin: 7px;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .complete {
    grid-template-columns: revert;
  }
}
.complete .step-title {
  text-align: center;
}

.jobdescription-list dt,
.jobdescription-list dd {
  padding-inline: revert;
}
@media (min-width: 768px) {
  .jobdescription-list dt,
  .jobdescription-list dd {
    padding-inline: 6rem;
  }
}
.jobdescription-list dt {
  color: var(--color-gray);
  margin-bottom: calc(var(--margin-bottom) - 0.5rem);
}
.jobdescription-list dd {
  border-bottom: solid 1px var(--color-shadow-gray);
  padding-bottom: 2rem;
  margin-bottom: var(--margin-bottom-md);
}
.jobdescription-list dd ol {
  list-style-type: decimal;
  list-style-position: inside;
}
.jobdescription-list .jobdescription-note li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
}
.jobdescription-list .jobdescription-note li::before {
  content: "※";
}
.jobdescription-list .technical {
  margin-top: 1rem;
}
.jobdescription-list .technical-heading {
  color: var(--color-gray);
  background-color: #fff;
  border-radius: 100svh;
  text-box-trim: trim-both;
  padding-inline: 1rem;
  width: -moz-fit-content;
  width: fit-content;
}

#howto-section {
  container: howto-layout/inline-size;
}
#howto-section .step-contents > p {
  margin-bottom: var(--margin-bottom);
}
#howto-section .web-entry {
  display: grid;
  gap: 1rem;
}
@container howto-layout (min-width: 1024px) {
  #howto-section .web-entry {
    grid-template-columns: repeat(2, 1fr);
  }
}
#howto-section .link-entry {
  --clamp-min: 15;
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 400;
  border-radius: 100svh;
  padding: 0.5rem;
  margin-bottom: var(--margin-bottom);
}
#howto-section .link-entry[disabled] {
  pointer-events: none;
  opacity: 0.6;
}
#howto-section .link-entry .click-here {
  display: grid;
  place-items: center;
  justify-content: center;
  gap: 0.5rem;
  grid-template-columns: repeat(3, auto);
}
#howto-section .link-entry .click-here span {
  --clamp-min: 14;
  --clamp-max: 15;
  border: solid 1px currentColor;
  text-box-trim: trim-both;
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: 2px;
  margin-block: 0.5rem;
}
@media (min-width: 768px) {
  #howto-section .link-entry .click-here span {
    padding-inline: 0.5rem;
  }
}
#howto-section .link-entry .click-here::after {
  content: "";
  width: 0.9em;
  aspect-ratio: 1;
  -webkit-mask-image: url(../img/entry/btn-external.svg);
          mask-image: url(../img/entry/btn-external.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: currentColor;
}
#howto-section .general {
  background-color: var(--color-rsk-green);
}
#howto-section .announcer {
  background-color: var(--color-rsk-red);
}
#howto-section .deadline-entry {
  display: grid;
  justify-content: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  background-color: var(--color-bg-gray);
  padding-inline: 0.5rem;
}
@container howto-layout (min-width: 1230px) {
  #howto-section .deadline-entry {
    grid-template-columns: repeat(2, auto);
  }
}
#howto-section .deadline-entry span {
  --clamp-min: 15;
}
#howto-section .deadline-wrap {
  display: grid;
  gap: 1rem;
}
@container howto-layout (min-width: 860px) {
  #howto-section .deadline-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
#howto-section .caution {
  font-size: 0.9em;
}
#howto-section .announcer-list .step-item {
  grid-template-areas: "announcer heading heading" "contents contents contents";
}
@media (min-width: 768px) {
  #howto-section .announcer-list .step-item {
    grid-template-columns: min(170px, 100%) 1fr;
    grid-template-areas: "announcer heading" "announcer contents";
    align-items: center;
    padding: 2rem;
  }
}
#howto-section .announcer-list .step-item:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  aspect-ratio: 1;
  margin: -1.8rem auto auto;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  rotate: 135deg;
}
@media (min-width: 768px) {
  #howto-section .announcer-list .complete {
    grid-template-columns: revert;
  }
}
#howto-section .announcer-list .step05 .deadline-entry {
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: 1rem;
}
#howto-section .announcer-list .step05 .link-entry {
  width: min(500px, 100%);
}
#howto-section .announcer-list .step-announcer {
  grid-area: announcer;
  padding-right: 1rem;
}
#howto-section .announcer-list .step-announcer .step-num {
  padding-right: revert;
  margin-bottom: calc(var(--margin-bottom) - 0.5rem);
}
@media (min-width: 768px) {
  #howto-section .announcer-list .step-announcer .step-num {
    margin-bottom: var(--margin-bottom);
  }
}
#howto-section .announcer-list .step-announcer .color-red {
  --clamp-min: 14;
  text-box-trim: trim-both;
  border-radius: 100svh;
  border: solid 1px var(--color-bg-gray);
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding-inline: 0.7rem;
}

#thanks-general .eijititle-text,
#thanks-general .entry-type {
  color: var(--color-rsk-green);
}

#thanks-announcer .eijititle-text,
#thanks-announcer .entry-type {
  color: var(--color-rsk-red);
}

.entry-type {
  --clamp-max: 22;
  text-box-trim: trim-both;
  border: solid 1px var(--color-shadow-gray);
  border-radius: 100svh;
  padding-inline: 1rem;
  width: -moz-fit-content;
  width: fit-content;
  letter-spacing: normal;
}

#thanks-section {
  --clamp-max: 22;
  line-height: 1.8;
}
@media (min-width: 768px) {
  #thanks-section {
    line-height: revert;
  }
}
#thanks-section .badge {
  text-box-trim: trim-both;
  border: solid 1px var(--color-shadow-gray);
  border-radius: 100svh;
  padding-inline: 0.5rem;
  margin-right: 0.5rem;
}
@media (min-width: 768px) {
  #thanks-section .badge {
    padding-inline: 1rem;
  }
}
#thanks-section .line-color {
  background-color: #fff;
}
#thanks-section h2 {
  --clamp-min: 22;
  --clamp-max: 32;
}
#thanks-section .thanks-contents,
#thanks-section .thanks-text,
#thanks-section h2 {
  margin-bottom: var(--margin-bottom-md);
}
@media (min-width: 768px) {
  #thanks-section .thanks-contents,
  #thanks-section .thanks-text,
  #thanks-section h2 {
    margin-bottom: var(--margin-bottom-lg);
  }
}
#thanks-section .deadline-wrap {
  border-radius: 15px;
  background-color: #fff;
  padding: 2rem 1rem;
}
#thanks-section .deadline-wrap dl {
  display: grid;
  justify-content: center;
  align-items: start;
  gap: 1rem 0.5rem;
  padding-bottom: 1rem;
}
@media (min-width: 768px) {
  #thanks-section .deadline-wrap dl {
    grid-template-columns: repeat(2, auto);
    gap: 2rem 0.5rem;
    padding: 2rem;
  }
}
#thanks-section .deadline-wrap dd {
  --clamp-min: 18;
}
#thanks-section .deadline-wrap .download {
  grid-column: 1/-1;
}
#thanks-section .address {
  text-align: center;
  border-radius: 15px;
  background-color: #fff;
  padding: 2rem 0.5rem;
  margin-bottom: var(--margin-bottom-md);
}
@media (min-width: 768px) {
  #thanks-section .address {
    padding: 2rem;
    margin-bottom: var(--margin-bottom-lg);
  }
}
#thanks-section .address *:not(:last-child) {
  margin-bottom: var(--margin-bottom);
}
#thanks-section .address .tel,
#thanks-section .address .mail {
  --clamp-min: 20;
  --clamp-max: 30;
  letter-spacing: 2px;
}
#thanks-section .address .contact-icon {
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  background-color: var(--color-bg-gray);
  width: min(30px, 100%);
  aspect-ratio: 1;
  padding: 0.5rem;
  margin-right: 0.5rem;
}
@media (min-width: 768px) {
  #thanks-section .address .contact-icon {
    width: min(38px, 100%);
  }
}
#thanks-section .address .contact-icon img {
  width: min(26px, 100%);
}
#thanks-section .back {
  --clamp-max: 28;
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  letter-spacing: 2px;
  background-image: linear-gradient(var(--color-rsk-green), var(--color-rsk-green));
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
  padding-block: 1rem;
  padding-inline: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  transition: background-size 0.3s;
  justify-content: revert;
  background-image: revert;
  text-align: center;
  justify-items: end;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px var(--color-shadow-gray);
  padding: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  transition: background-color 0.3s;
}

.submit {
  border: solid 1px var(--color-bg-gray);
  border-radius: 15px;
  padding: 1rem;
  width: min(990px, 100%);
  margin-inline: auto;
}
.submit-heading {
  color: var(--color-rsk-red);
  font-size: 1.1em;
}
.submit-text {
  list-style-type: decimal;
  list-style-position: inside;
  margin-bottom: var(--margin-bottom);
}
.submit .option-item {
  --clamp-max: 18;
}
.submit .btn-announcer {
  --clamp-max: 22;
  margin-block: 1rem;
  margin-inline: 0 auto;
  display: grid;
  place-items: center;
  justify-content: center;
  gap: 0.5rem;
  grid-template-columns: repeat(2, auto);
}
.submit .btn-announcer::after {
  content: "";
  width: 0.9em;
  aspect-ratio: 1;
  -webkit-mask-image: url(../img/entry/btn-external.svg);
          mask-image: url(../img/entry/btn-external.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: currentColor;
}

.options {
  border: solid 1px var(--color-bg-gray);
  border-radius: 15px;
  padding: 1rem;
}
.options .option-item:first-child {
  border-bottom: solid 1px var(--color-bg-gray);
  padding-bottom: 1rem;
  margin-bottom: var(--margin-bottom);
}
.options .option-title {
  border: solid 1px var(--color-bg-gray);
  border-radius: 100svh;
  padding-inline: 1rem;
  width: -moz-fit-content;
  width: fit-content;
}

.btn-general,
.btn-announcer {
  display: block;
  color: #fff;
  font-weight: 400;
  line-height: 1.4;
  border-radius: 100svh;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding: 0.5rem 2rem;
}

.btn-general {
  background-color: var(--color-rsk-green);
}

.btn-announcer {
  background-color: var(--color-rsk-red);
}

.environment-main {
  padding-bottom: 5rem;
  overflow: clip;
}
@media (min-width: 768px) {
  .environment-main {
    line-height: 2;
    padding-bottom: 9rem;
  }
}
.environment-main h1 {
  text-shadow: var(--text-shadow);
  filter: drop-shadow(0 0 2px #fff);
}
.environment-main .eijititle-text {
  color: var(--color-rsk-green);
  filter: drop-shadow(0 0 1px #fff);
}

.environment-hero {
  display: grid;
  align-items: center;
  font-weight: 500;
  letter-spacing: 2px;
}
.environment-hero .environment-hero-image {
  -o-object-position: right;
     object-position: right;
}

.environment-heading {
  position: absolute;
  z-index: 1;
  width: var(--inline-size);
  padding: clamp(1rem, 2vw + 1rem, 4rem);
}
@media (min-width: 768px) {
  .environment-heading {
    margin-left: clamp(2vw, 20vw - 5rem, 20vw);
  }
}
@media (max-width: 767px) {
  .environment-heading {
    bottom: -6vh;
  }
}
.environment-heading h1,
.environment-heading .environment-text {
  text-shadow: var(--text-shadow);
  filter: drop-shadow(0 0 2px #fff);
}
.environment-heading .environment-text {
  width: min(700px, 100%);
}

#environment-numbers-section,
#environment-benefits-section {
  width: var(--inline-size);
  margin-inline: auto;
}

#environment-numbers-section .section-title .note {
  --clamp-min: 14;
  --clamp-max: 16;
  text-align: right;
}

.numbers-contents {
  display: grid;
  gap: 1rem 0.5rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "number01 number01" "number02 number02" "number03 number03" "number04 number05" "number06 number06" "number07 number07" "number08 number08" "number09 number10" "number11 number11" "number12 number12" "number13 number14" "number15 number15" "number16 number16";
}
@media (min-width: 768px) {
  .numbers-contents {
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(9, auto);
    grid-template-areas: "number01 number01 number03 number03" "number02 number02 number03 number03" "number07 number07 number04 number05" "number07 number07 number06 number06" "number08 number08 number11 number11" "number09 number10 number11 number11" "number12 number12 number13 number14" "number12 number12 number15 number15" "number16 number16 number16 number16";
  }
}
.numbers-contents .number01 {
  grid-area: number01;
}
.numbers-contents .number02 {
  grid-area: number02;
}
.numbers-contents .number03 {
  grid-area: number03;
}
.numbers-contents .number03 img {
  -o-object-fit: cover;
     object-fit: cover;
}
.numbers-contents .number04 {
  grid-area: number04;
}
.numbers-contents .number05 {
  grid-area: number05;
}
.numbers-contents .number06 {
  grid-area: number06;
}
.numbers-contents .number07 {
  grid-area: number07;
}
.numbers-contents .number08 {
  grid-area: number08;
}
.numbers-contents .number09 {
  grid-area: number09;
}
.numbers-contents .number10 {
  grid-area: number10;
}
.numbers-contents .number11 {
  grid-area: number11;
}
.numbers-contents .number12 {
  grid-area: number12;
}
.numbers-contents .number13 {
  grid-area: number13;
}
.numbers-contents .number14 {
  grid-area: number14;
}
.numbers-contents .number15 {
  grid-area: number15;
}
.numbers-contents .number16 {
  grid-area: number16;
}
.numbers-contents img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 15px;
}

.benefits-list {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .benefits-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.benefits-list .benefits-item {
  border-radius: 15px;
  background-color: #fff;
  padding: 2rem;
}
.benefits-list .benefits-item:nth-child(odd) .item-heading span {
  font-size: smaller;
  color: var(--color-rsk-green);
}
.benefits-list .benefits-item:nth-child(even) .item-heading span {
  font-size: smaller;
  color: var(--color-rsk-red);
}
.benefits-list .item-heading {
  --clamp-min: 18;
  --clamp-max: 22;
  font-weight: 500;
  letter-spacing: 2px;
  text-indent: -1.5rem;
  margin-left: 1.5rem;
  margin-bottom: var(--margin-bottom);
}

/* ========================
  component
======================== */
:root {
  --parallax-animation1: parallax-animation 2s ease-in-out alternate infinite;
  --parallax-animation2: parallax-animation2 2s ease-in-out alternate infinite;
  --clamp-parallax-sm: clamp(1rem, 0.17rem + 7.273vw, 3.625rem);
  --clamp-parallax-md: clamp(2rem, 0.17rem + 7.273vw, 5.625rem);
  --clamp-parallax-lg: clamp(4rem, 0.17rem + 7.273vw, 9.375rem);
}

@keyframes parallax-animation {
  from {
    translate: 0 5px;
  }
  to {
    translate: 0 -5px;
  }
}
@keyframes parallax-animation2 {
  from {
    translate: 0 -5px;
  }
  to {
    translate: 5px 5px;
  }
}
.parallax img {
  position: absolute;
  mix-blend-mode: multiply;
  width: var(--clamp-parallax-md);
}

#global-container {
  position: relative;
}

.parallax-global-nav img {
  position: absolute;
  animation: var(--parallax-animation1);
  z-index: -3;
  mix-blend-mode: multiply;
}
@media (max-width: 767px) {
  .parallax-global-nav img {
    width: 8cqw;
  }
}
@media (max-width: 767px) {
  .parallax-global-nav .s_blur01-global,
  .parallax-global-nav .figure_blur01-global,
  .parallax-global-nav .s_blur01-global__bottom {
    width: 30cqw;
  }
}
@media (max-width: 767px) {
  .parallax-global-nav .i_blur01-global,
  .parallax-global-nav .s_blur01-global__bottom {
    width: 20cqw;
  }
}
.parallax-global-nav .s_blur01-global {
  top: 15%;
  right: 0;
}
.parallax-global-nav .i_blur01-global {
  animation: var(--parallax-animation2);
  top: 30%;
  right: 10%;
}
@media (max-width: 767px) {
  .parallax-global-nav .i_blur01-global {
    right: 30%;
  }
}
.parallax-global-nav .figure_blur01-global {
  top: 40%;
  right: 0;
}
@media (max-width: 767px) {
  .parallax-global-nav .figure_blur01-global {
    right: 10%;
  }
}
.parallax-global-nav .k_blur01-global {
  animation: var(--parallax-animation2);
  top: 60%;
  right: 10%;
}
@media (max-width: 767px) {
  .parallax-global-nav .k_blur01-global {
    right: 20%;
  }
}
.parallax-global-nav .s_blur01-global__bottom {
  top: 80%;
  right: 10%;
}
@media (max-width: 767px) {
  .parallax-global-nav .s_blur01-global__bottom {
    right: 35%;
  }
}

#hero-section {
  position: relative;
}

.parallax-index img {
  animation: var(--parallax-animation1);
}
.parallax-index .s_blur01 {
  top: 37%;
  left: -3%;
  width: var(--clamp-parallax-lg);
  z-index: -1;
}
.parallax-index .i_01 {
  top: 6%;
  left: 15%;
  width: var(--clamp-parallax-sm);
}
.parallax-index .r_01 {
  top: 25%;
  left: 25%;
  animation: var(--parallax-animation2);
  width: var(--clamp-parallax-lg);
}
.parallax-index .s_01 {
  top: 18%;
  left: 50%;
}
@media (min-width: 768px) {
  .parallax-index .s_01 {
    top: 3%;
    left: 40%;
  }
}
.parallax-index .i_blur01 {
  top: -7%;
  left: 45%;
  animation: var(--parallax-animation2);
}
.parallax-index .figure_01 {
  top: 0;
  left: 65%;
}
.parallax-index .figure_02 {
  top: 30%;
  left: 53%;
  animation: var(--parallax-animation2);
}
.parallax-index .s_tra {
  top: 55%;
  right: 30%;
  width: var(--clamp-parallax-md);
}
.parallax-index .i_02 {
  top: 30%;
  right: 11%;
  width: var(--clamp-parallax-sm);
  animation: var(--parallax-animation2);
}
.parallax-index .k_01 {
  top: 50%;
  right: 8%;
  animation: var(--parallax-animation2);
  width: var(--clamp-parallax-md);
}
.parallax-index .figure_blur02 {
  width: var(--clamp-parallax-md);
}
.parallax-index .figure_blur01 {
  top: 25%;
  left: 5%;
  width: var(--clamp-parallax-md);
}
.parallax-index .r_tra {
  top: 70%;
  right: 50%;
  animation: var(--parallax-animation2);
}
@media (min-width: 768px) {
  .parallax-index .r_tra {
    right: 40%;
  }
}
.parallax-index .i_tra {
  top: 65%;
  right: 20%;
}
@media (min-width: 768px) {
  .parallax-index .i_tra {
    width: 50px;
  }
}
.parallax-index .k_01_bottom {
  bottom: -80%;
  right: 20%;
}
.parallax-index .k_blur01 {
  top: 90%;
  right: 20%;
  animation: var(--parallax-animation2);
}

.parallax-index-aboutus img {
  animation: var(--parallax-animation1);
  z-index: -1;
}
.parallax-index-aboutus .r_01_aboutus {
  top: 10%;
  right: 10%;
  animation: var(--parallax-animation2);
  width: clamp(5rem, -2.557rem + 24.242vw, 15.625rem);
  z-index: -1;
}
@media (min-width: 768px) {
  .parallax-index-aboutus .r_01_aboutus {
    top: 70%;
  }
}
.parallax-index-aboutus .s_01_aboutus {
  top: -22%;
  left: 45%;
}
.parallax-index-aboutus .figure_01_aboutus {
  top: 0;
  left: 50%;
}

.parallax-internal img {
  animation: revert;
}
@media (min-width: 768px) {
  .parallax-internal .s_01 {
    top: 36%;
    left: 6%;
    width: 5cqw;
  }
  .parallax-internal .s_tra {
    top: 5%;
    left: 37%;
    width: var(--clamp-parallax-md);
  }
  .parallax-internal .r_01 {
    bottom: -30%;
    left: 5%;
    width: var(--clamp-parallax-lg);
  }
  .parallax-internal .figure_02 {
    bottom: 0;
    left: 33%;
  }
  .parallax-internal .figure_blur02 {
    top: 65%;
    left: 13%;
    width: var(--clamp-parallax-lg);
  }
  .parallax-internal .s_tra {
    top: 2%;
    left: 35%;
    width: var(--clamp-parallax-md);
  }
  .parallax-internal .k_01 {
    bottom: -20%;
    left: 50%;
    width: var(--clamp-parallax-md);
  }
  .parallax-internal .i_01 {
    bottom: -5%;
    right: 11%;
    width: var(--clamp-parallax-sm);
  }
  .parallax-internal .i_02 {
    bottom: -10%;
    right: 25%;
    width: var(--clamp-parallax-sm);
  }
}
@media (max-width: 767px) {
  .parallax-internal .s_01 {
    top: 80%;
    right: 6%;
    transform: rotate3d(0, 1, 1, 45deg);
  }
  .parallax-internal .r_01 {
    bottom: -20%;
    right: 10%;
    width: var(--clamp-parallax-lg);
  }
  .parallax-internal .figure_02,
  .parallax-internal .figure_blur02,
  .parallax-internal .s_tra,
  .parallax-internal .k_01,
  .parallax-internal .i_02 {
    display: none;
  }
}

@media (min-width: 768px) {
  #topmessage .parallax-internal .s_tra {
    left: 30%;
  }
}
@media (max-width: 767px) {
  #topmessage .parallax-internal .s_01 {
    top: 100%;
    right: 6%;
    transform: rotate3d(0, 1, 1, 45deg);
  }
  #topmessage .parallax-internal .r_01 {
    bottom: -30%;
    right: 10%;
    width: var(--clamp-parallax-lg);
  }
  #topmessage .parallax-internal .figure_02 {
    display: block;
    bottom: 10%;
    left: 50%;
  }
  #topmessage .parallax-internal .figure_blur02,
  #topmessage .parallax-internal .s_tra,
  #topmessage .parallax-internal .k_01,
  #topmessage .parallax-internal .i_02 {
    display: none;
  }
}

@media (min-width: 768px) {
  .parallax-aboutus-company .k_blur01 {
    top: 5%;
    left: 42%;
    width: var(--clamp-parallax-lg);
  }
  .parallax-aboutus-company .figure_01 {
    top: 30%;
    left: 50%;
    width: var(--clamp-parallax-lg);
  }
  .parallax-aboutus-company .s_tra {
    top: 50%;
    left: 35%;
    width: var(--clamp-parallax-md);
  }
  .parallax-aboutus-company .i_tra {
    top: 53%;
    right: 12%;
    width: 50px;
  }
}
@media (max-width: 767px) {
  .parallax-aboutus-company .k_blur01 {
    top: 0%;
    right: 10%;
    width: var(--clamp-parallax-lg);
  }
  .parallax-aboutus-company .figure_01 {
    top: 30%;
    left: 3%;
    width: var(--clamp-parallax-lg);
  }
  .parallax-aboutus-company .s_tra {
    top: 54%;
    left: 50%;
    width: var(--clamp-parallax-md);
  }
  .parallax-aboutus-company .i_tra {
    top: 40%;
    right: 7%;
  }
}

@media (min-width: 768px) {
  .parallax-interview-message .s_01 {
    top: -10%;
    left: 7%;
  }
  .parallax-interview-message .r_01 {
    top: 60%;
    right: 10%;
    width: min(250px, 100%);
    z-index: -1;
  }
  .parallax-interview-message .k_blur01 {
    top: -80%;
    right: 20%;
    width: min(200px, 100%);
    z-index: -1;
  }
  .parallax-interview-message .figure_01 {
    top: -20%;
    left: 15%;
    width: var(--clamp-parallax-md);
    z-index: -1;
  }
}
@media (max-width: 767px) {
  .parallax-interview-message .s_01 {
    top: -32%;
    left: 7%;
  }
  .parallax-interview-message .r_01 {
    top: 60%;
    right: 5%;
    width: min(150px, 100%);
    z-index: -1;
  }
  .parallax-interview-message .k_blur01 {
    top: -80%;
    right: 10%;
    width: var(--clamp-parallax-lg);
  }
  .parallax-interview-message .figure_01 {
    top: 0;
    left: 3%;
    width: var(--clamp-parallax-lg);
  }
}/*# sourceMappingURL=style.css.map */