:root {
  --vw: 0;
}
@media screen and (min-width: 768px) {
  :root {
    --vw: 1vw;
  }
}

ul,
ol,
li,
dl,
dt,
dd,
figure,
figcaption,
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
  transition: background-color 0.2s linear, color 0.2s linear;
}
a:hover {
  text-decoration: none;
  color: #000;
  transition: background-color 0.2s linear, color 0.2s linear;
}

img {
  width: 100%;
  height: auto;
}

html {
  width: 100%;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  color: #000;
  overflow-x: hidden;
}
@media screen and (min-width: 768px) {
  body {
    overflow-x: initial;
  }
}
body.noScroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 100%;
}

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

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

header {
  height: 16.1538461538vw;
  display: grid;
  grid-template-columns: 28.2051282051vw auto;
  padding: 0 0 0 3.0769230769vw;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  header {
    padding: 0;
    height: min(73px, 5.84vw);
    grid-template-columns: 1fr min(129px, 10.32vw) 1fr;
  }
}
header #menuBtn {
  cursor: pointer;
  padding: 1.0256410256vw 3.0769230769vw;
  font-family: "Manrope", sans-serif;
  font-size: 3.5897435897vw;
  line-height: 1;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  header #menuBtn {
    order: -1;
    padding: min(26px, 2.08vw) 1.3888888889vw;
    font-size: min(18px, 1.44vw);
    line-height: 1;
  }
}
header > p {
  display: none;
}
@media screen and (min-width: 768px) {
  header > p {
    display: block;
    padding: min(26px, 2.08vw) 1.3888888889vw;
    justify-self: end;
    font-family: "Manrope", sans-serif;
    font-size: min(18px, 1.44vw);
    line-height: 1;
    font-weight: 600;
  }
}
header #gNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background-color: #fff;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 999;
  pointer-events: none;
  font-family: "Noto Sans JP", sans-serif;
}
header #gNav.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
header #gNav nav {
  padding-top: 27.9487179487vw;
  padding-left: 9.7435897436vw;
}
@media screen and (min-width: 768px) {
  header #gNav nav {
    width: 24.2361111111vw;
    padding-top: min(109px, 8.72vw);
    padding-left: 2.6388888889vw;
  }
}
header #gNav nav ul {
  display: flex;
  flex-direction: column;
  gap: 8.2051282051vw;
}
@media screen and (min-width: 768px) {
  header #gNav nav ul {
    gap: min(32px, 2.56vw);
  }
}
header #gNav nav ul li a {
  display: grid;
  font-size: 6.1538461538vw;
  line-height: 1;
  align-items: center;
  transition: transform 0.2s ease-in-out;
  grid-template-columns: 6.1538461538vw 1fr;
  gap: 3.5897435897vw;
  transform: translateX(6.6666666667vw);
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  header #gNav nav ul li a {
    font-size: min(24px, 1.92vw);
    line-height: 1;
    grid-template-columns: min(24px, 1.92vw) 1fr;
    gap: min(14px, 1.12vw);
    transform: translateX(min(26px, 2.08vw));
  }
}
@media (hover: hover) and (pointer: fine) {
  header #gNav nav ul li a:hover {
    transform: translateX(0) !important;
  }
}
header #gNav nav ul li a:before {
  content: "";
  width: 100%;
  aspect-ratio: 24/24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cg fill='%23000' clip-path='url(%23a)'%3E%3Cpath d='M10.688 16.049H.683a11.996 11.996 0 0 0 2.48 4.13 11.94 11.94 0 0 0 7.525 3.822v-7.952Z'/%3E%3Cpath d='M20.838 3.894C16.355-1.002 8.762-1.325 3.881 3.172A12.041 12.041 0 0 0 .073 13.374H20v2.675h-6.646v7.948a11.93 11.93 0 0 0 6.764-3.096c4.88-4.497 5.203-12.11.72-17.007Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  header #gNav nav ul li a:hover:before {
    opacity: 1;
  }
}
header #gNav .bottom {
  padding: 4.8717948718vw 4.358974359vw;
  position: relative;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  header #gNav .bottom {
    width: 24.2361111111vw;
    padding: min(19px, 1.52vw) min(17px, 1.36vw);
  }
}
header #gNav .bottom .copy {
  font-size: 3.0769230769vw;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  header #gNav .bottom .copy {
    font-size: min(12px, 0.96vw);
    line-height: 1;
  }
}
header #gNav .bottom .privacy {
  margin-top: 1.4102564103vw;
  font-size: 2.5641025641vw;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  header #gNav .bottom .privacy {
    margin-top: min(5.5px, 0.44vw);
    font-size: min(10px, 0.8vw);
    line-height: 1;
  }
}
@media (hover: hover) and (pointer: fine) {
  header #gNav .bottom .privacy:hover {
    text-decoration: underline;
  }
}
header #gNav .bottom .credit {
  position: absolute;
  font-size: 3.0769230769vw;
  line-height: 1;
  bottom: 4.8717948718vw;
  right: 4.358974359vw;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  header #gNav .bottom .credit {
    font-size: min(12px, 0.96vw);
    line-height: 1;
    bottom: min(19px, 1.52vw);
    right: min(17px, 1.36vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  header #gNav .bottom .credit:hover {
    text-decoration: underline;
  }
}
header #gNav .bottom:has(.creditArea.open) .credit {
  display: none;
}
header #gNav .bottom .creditArea {
  transform: translateY(-100vh);
  opacity: 0;
  z-index: 9999;
  flex-direction: column;
  pointer-events: none;
  width: 100%;
  height: calc(100svh - 20.2564102564vw);
  top: 0;
  left: 0;
  position: fixed;
  background-color: #fff;
  border-bottom: 0.2564102564vw solid #000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  justify-content: flex-end;
  padding-bottom: 6.9230769231vw;
  display: flex;
  flex-direction: column;
  gap: 3.5897435897vw;
}
@media screen and (min-width: 768px) {
  header #gNav .bottom .creditArea {
    height: calc(100svh - min(62px, 4.96vw));
    border-bottom-width: min(1px, 0.08vw);
    padding-bottom: min(27px, 2.16vw);
    gap: min(14px, 1.12vw);
    width: 24.2361111111vw;
  }
}
header #gNav .bottom .creditArea.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
header #gNav .bottom .creditArea .closeCredit {
  position: absolute;
  font-size: 3.0769230769vw;
  line-height: 1;
  bottom: -15.3846153846vw;
  right: 4.358974359vw;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  header #gNav .bottom .creditArea .closeCredit {
    font-size: min(12px, 0.96vw);
    line-height: 1;
    bottom: max(-45px, -3.6vw);
    right: min(17px, 1.36vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  header #gNav .bottom .creditArea .closeCredit:hover {
    text-decoration: underline;
  }
}
header #gNav .bottom .creditArea dl {
  padding: 0 4.358974359vw;
  font-size: 3.0769230769vw;
  line-height: 1.1666666667;
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: 3.0769230769vw;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  header #gNav .bottom .creditArea dl {
    padding: 0 min(17px, 1.36vw);
    font-size: min(12px, 0.96vw);
    line-height: 1.1666666667;
    gap: min(12px, 0.96vw);
    grid-template-columns: 1fr min(107px, 8.56vw);
  }
}
header #gNav .bottom .creditArea dl dt {
  font-weight: 500;
}
header #gNav > .close {
  position: fixed;
  top: 0;
  left: 0;
  padding: 6.6666666667vw 4.358974359vw;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  font-size: 4.6153846154vw;
  line-height: 1;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  header #gNav > .close {
    padding: min(26px, 2.08vw) 1.1805555556vw;
    font-size: min(18px, 1.44vw);
    line-height: 1;
  }
}
header #gNav .back {
  display: none;
}
@media screen and (min-width: 768px) {
  header #gNav .back {
    display: flex;
    justify-content: end;
    align-items: end;
    border-left: min(1px, 0.08vw) solid #000;
    width: calc(100% - 24.2361111111vw);
    height: 100svh;
    background-color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
  }
  header #gNav .back img {
    width: 25.6944444444vw;
    padding: min(41px, 3.28vw) min(30px, 2.4vw);
  }
}

main {
  margin-top: 16.1538461538vw;
}
@media screen and (min-width: 768px) {
  main {
    margin-top: min(73px, 5.84vw);
  }
}

footer {
  width: 100%;
  padding: 0 3.0769230769vw;
  margin-top: 24.6153846154vw;
  padding-bottom: 23.9743589744vw;
}
@media screen and (min-width: 768px) {
  footer {
    padding: 0 1.3888888889vw;
  }
}
@media screen and (min-width: 768px) {
  footer {
    margin-top: min(79px, 6.32vw);
    padding-bottom: calc(min(20px, 1.6vw) + min(62px, 4.96vw));
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
footer p:first-of-type {
  font-family: "Manrope", sans-serif;
  font-size: 3.0769230769vw;
  line-height: 1;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  footer p:first-of-type {
    font-size: min(12px, 0.96vw);
    line-height: 1;
  }
}
footer p:last-of-type {
  margin-top: 2.6923076923vw;
}
@media screen and (min-width: 768px) {
  footer p:last-of-type {
    margin-top: 0;
  }
}
footer p:last-of-type a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.5641025641vw;
  line-height: 1;
  position: relative;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  footer p:last-of-type a {
    font-size: min(10px, 0.8vw);
    line-height: 1;
  }
  footer p:last-of-type a:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    transition: transform 0.2s ease-in-out;
    transform-origin: center top;
    transform: scaleX(0);
  }
}
@media (hover: hover) and (pointer: fine) {
  footer p:last-of-type a:hover:after {
    transform: scaleX(1);
  }
}

#ribbon {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 0.2564102564vw solid #000;
  height: 13.3333333333vw;
  padding: 3.0769230769vw 3.0769230769vw 0;
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  z-index: 100;
}
@media screen and (min-width: 768px) {
  #ribbon {
    grid-template-columns: repeat(3, 1fr);
    height: min(62px, 4.96vw);
    border-top-width: min(1px, 0.08vw);
    padding: min(23px, 1.84vw) 1.6666666667vw 0;
  }
}
#ribbon p:not(.section, .name) {
  display: none;
}
@media screen and (min-width: 768px) {
  #ribbon p:not(.section, .name) {
    display: block;
    justify-self: center;
  }
}
#ribbon p {
  font-size: 3.0769230769vw;
  line-height: 1;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #ribbon p {
    font-size: min(10px, 0.8vw);
    line-height: 1;
  }
}
#ribbon .name {
  justify-self: end;
}
#ribbon .on {
  overflow: hidden;
  display: block;
}
#ribbon .animeOn {
  display: inline-block;
  animation: ribbonFlip 0.6s cubic-bezier(0.14, 1, 0.34, 1);
}
@keyframes ribbonFlip {
  0% {
    transform: translateY(110%);
  }
  100% {
    transform: translateY(0);
  }
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100svh;
  background-color: #fff;
  transition: all 1s;
}
#loading #logoanime {
  display: block;
  aspect-ratio: 1/1;
  width: 51.2820512821vw;
}
@media screen and (min-width: 768px) {
  #loading #logoanime {
    width: min(260px, 20.8vw);
  }
}

#index.is-load #mainvisual {
  opacity: 1;
}
#index #mainvisual {
  width: 100%;
  padding: 0 3.0769230769vw;
  padding-bottom: 12.2435897436vw;
  opacity: 0;
  transition: opacity 1s ease 0s;
}
@media screen and (min-width: 768px) {
  #index #mainvisual {
    padding: 0 1.3888888889vw;
  }
}
@media screen and (min-width: 768px) {
  #index #mainvisual {
    padding-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}
#index #mainvisual img {
  padding-bottom: 2.0512820513vw;
}
@media screen and (min-width: 768px) {
  #index #mainvisual img {
    padding-bottom: min(25px, 2vw);
  }
}
#index #mainvisual p {
  font-family: "Manrope", sans-serif;
  font-size: 3.0769230769vw;
  line-height: 1.3333333333;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #index #mainvisual p {
    font-size: min(16px, 1.28vw);
    line-height: 1;
  }
}
#index #ourVision,
#index #workStyle,
#index #ourService,
#index #contact {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  padding-top: 12.3076923077vw;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #index #ourVision,
  #index #workStyle,
  #index #ourService,
  #index #contact {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #index #ourVision,
  #index #workStyle,
  #index #ourService,
  #index #contact {
    padding-top: min(140px, 11.2vw);
    grid-template-columns: min(400px, 32vw) min(400px, 32vw);
    grid-template-rows: auto auto 1fr auto;
    gap: 0 min(97px, 7.76vw);
  }
}
#index #ourVision h2,
#index #workStyle h2,
#index #ourService h2,
#index #contact h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #index #ourVision h2,
  #index #workStyle h2,
  #index #ourService h2,
  #index #contact h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#index #ourVision h2 > span:not(.on, .anime),
#index #workStyle h2 > span:not(.on, .anime),
#index #ourService h2 > span:not(.on, .anime),
#index #contact h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #index #ourVision h2 > span:not(.on, .anime),
  #index #workStyle h2 > span:not(.on, .anime),
  #index #ourService h2 > span:not(.on, .anime),
  #index #contact h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#index #ourVision h2 > span:not(.on, .anime):nth-of-type(1) .anime,
#index #workStyle h2 > span:not(.on, .anime):nth-of-type(1) .anime,
#index #ourService h2 > span:not(.on, .anime):nth-of-type(1) .anime,
#index #contact h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#index #ourVision h2 > span:not(.on, .anime):nth-of-type(2) .anime,
#index #workStyle h2 > span:not(.on, .anime):nth-of-type(2) .anime,
#index #ourService h2 > span:not(.on, .anime):nth-of-type(2) .anime,
#index #contact h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#index #ourVision h2 .on,
#index #workStyle h2 .on,
#index #ourService h2 .on,
#index #contact h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#index #ourVision h2.anime .on span,
#index #workStyle h2.anime .on span,
#index #ourService h2.anime .on span,
#index #contact h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#index #ourVision h2.animeOn .on span,
#index #workStyle h2.animeOn .on span,
#index #ourService h2.animeOn .on span,
#index #contact h2.animeOn .on span {
  transform: translateY(0);
}
#index #ourVision h2.anime.animeOn > .on:nth-of-type(1) span,
#index #workStyle h2.anime.animeOn > .on:nth-of-type(1) span,
#index #ourService h2.anime.animeOn > .on:nth-of-type(1) span,
#index #contact h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#index #ourVision h2.anime.animeOn > span > .on:nth-of-type(1) span,
#index #workStyle h2.anime.animeOn > span > .on:nth-of-type(1) span,
#index #ourService h2.anime.animeOn > span > .on:nth-of-type(1) span,
#index #contact h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#index #ourVision h2.anime.animeOn > span > .on:nth-of-type(2) span,
#index #workStyle h2.anime.animeOn > span > .on:nth-of-type(2) span,
#index #ourService h2.anime.animeOn > span > .on:nth-of-type(2) span,
#index #contact h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#index #ourVision h2.anime.animeOn > span > .on:nth-of-type(3) span,
#index #workStyle h2.anime.animeOn > span > .on:nth-of-type(3) span,
#index #ourService h2.anime.animeOn > span > .on:nth-of-type(3) span,
#index #contact h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #index #ourVision h2,
  #index #workStyle h2,
  #index #ourService h2,
  #index #contact h2 {
    margin-top: min(3px, 0.24vw);
  }
}
#index #ourVision p:not(.more),
#index #workStyle p:not(.more),
#index #ourService p:not(.more),
#index #contact p:not(.more) {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #index #ourVision p:not(.more),
  #index #workStyle p:not(.more),
  #index #ourService p:not(.more),
  #index #contact p:not(.more) {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #index #ourVision p:not(.more),
  #index #workStyle p:not(.more),
  #index #ourService p:not(.more),
  #index #contact p:not(.more) {
    margin-top: min(14px, 1.12vw);
    grid-row: 2;
  }
}
#index #ourVision .more,
#index #workStyle .more,
#index #ourService .more,
#index #contact .more {
  margin-top: 15.3846153846vw;
  margin-bottom: 12.3076923077vw;
}
#index #ourVision .more a,
#index #workStyle .more a,
#index #ourService .more a,
#index #contact .more a {
  font-family: "Manrope", sans-serif;
  padding: 2.8205128205vw 0 2.5641025641vw;
  display: block;
  font-size: 4.1025641026vw;
  line-height: 1;
  position: relative;
  font-weight: 500;
  min-width: 20.5128205128vw;
  width: max-content;
}
@media screen and (min-width: 768px) {
  #index #ourVision .more a,
  #index #workStyle .more a,
  #index #ourService .more a,
  #index #contact .more a {
    font-size: min(16px, 1.28vw);
    line-height: 1;
    padding: min(11px, 0.88vw) 0 min(12px, 0.96vw);
    width: min(140px, 11.2vw);
    min-width: auto;
  }
}
#index #ourVision .more a:after,
#index #workStyle .more a:after,
#index #ourService .more a:after,
#index #contact .more a:after {
  content: "";
  width: 100%;
  height: 0.2564102564vw;
  background-color: #000;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  transition: transform 0.25s ease-in-out;
  transform-origin: center top;
}
@media screen and (min-width: 768px) {
  #index #ourVision .more a:after,
  #index #workStyle .more a:after,
  #index #ourService .more a:after,
  #index #contact .more a:after {
    height: min(1px, 0.08vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #index #ourVision .more a:hover:after,
  #index #workStyle .more a:hover:after,
  #index #ourService .more a:hover:after,
  #index #contact .more a:hover:after {
    transform: scaleX(0);
  }
}
@media screen and (min-width: 768px) {
  #index #ourVision .more,
  #index #workStyle .more,
  #index #ourService .more,
  #index #contact .more {
    margin-top: min(62px, 4.96vw);
    margin-bottom: 0;
    grid-row: 3;
  }
}
#index #ourVision h3,
#index #workStyle h3,
#index #ourService h3,
#index #contact h3 {
  font-family: "Manrope", sans-serif;
  font-size: 6.1538461538vw;
  line-height: 1.2;
  margin: 20.5128205128vw 0;
  font-weight: 500;
  order: 5;
}
@media screen and (min-width: 768px) {
  #index #ourVision h3,
  #index #workStyle h3,
  #index #ourService h3,
  #index #contact h3 {
    font-size: min(40px, 3.2vw);
    line-height: 1.05;
    margin: 0;
    letter-spacing: max(-0.4px, -0.032vw);
  }
}
#index #ourVision h3 .pc,
#index #workStyle h3 .pc,
#index #ourService h3 .pc,
#index #contact h3 .pc {
  display: none !important;
}
@media screen and (min-width: 768px) {
  #index #ourVision h3 .pc,
  #index #workStyle h3 .pc,
  #index #ourService h3 .pc,
  #index #contact h3 .pc {
    display: inline-block !important;
  }
}
#index #ourVision h3 .on,
#index #workStyle h3 .on,
#index #ourService h3 .on,
#index #contact h3 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#index #ourVision h3.anime .on span,
#index #workStyle h3.anime .on span,
#index #ourService h3.anime .on span,
#index #contact h3.anime .on span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#index #ourVision h3.animeOn .on span,
#index #workStyle h3.animeOn .on span,
#index #ourService h3.animeOn .on span,
#index #contact h3.animeOn .on span {
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #index #ourVision h3,
  #index #workStyle h3,
  #index #ourService h3,
  #index #contact h3 {
    grid-row: 5;
    grid-column: 1/3;
  }
}
#index #ourVision picture:not(.wide),
#index #workStyle picture:not(.wide),
#index #ourService picture:not(.wide),
#index #contact picture:not(.wide) {
  display: block;
}
@media screen and (min-width: 768px) {
  #index #ourVision picture:not(.wide),
  #index #workStyle picture:not(.wide),
  #index #ourService picture:not(.wide),
  #index #contact picture:not(.wide) {
    width: 100%;
    margin-left: 0;
    grid-row: 1/4;
  }
}
#index #ourVision picture:not(.wide) .anime2,
#index #workStyle picture:not(.wide) .anime2,
#index #ourService picture:not(.wide) .anime2,
#index #contact picture:not(.wide) .anime2 {
  transform: translateY(10%);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.14, 1, 0.34, 1);
}
#index #ourVision picture:not(.wide) .animeOn,
#index #workStyle picture:not(.wide) .animeOn,
#index #ourService picture:not(.wide) .animeOn,
#index #contact picture:not(.wide) .animeOn {
  transform: translateY(0);
  opacity: 1;
}
#index #ourVision .wide,
#index #workStyle .wide,
#index #ourService .wide,
#index #contact .wide {
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
}
@media screen and (min-width: 768px) {
  #index #ourVision .wide,
  #index #workStyle .wide,
  #index #ourService .wide,
  #index #contact .wide {
    width: calc(var(--vw) * 100 - 2.7777777778vw);
    grid-column: 1/3;
    margin-left: 0;
  }
}
#index #ourVision .wide .anime2,
#index #workStyle .wide .anime2,
#index #ourService .wide .anime2,
#index #contact .wide .anime2 {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
#index #ourVision .wide .animeOn,
#index #workStyle .wide .animeOn,
#index #ourService .wide .animeOn,
#index #contact .wide .animeOn {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #index #ourVision .wide,
  #index #workStyle .wide,
  #index #ourService .wide,
  #index #contact .wide {
    margin-left: -14.7916666667vw;
  }
}
#index #ourVision figure figcaption,
#index #workStyle figure figcaption,
#index #ourService figure figcaption,
#index #contact figure figcaption {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.5641025641vw;
  line-height: 1.6;
  letter-spacing: 0.0512820513vw;
  text-align: right;
  margin-top: 2.0512820513vw;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #index #ourVision figure figcaption,
  #index #workStyle figure figcaption,
  #index #ourService figure figcaption,
  #index #contact figure figcaption {
    margin-top: min(14px, 1.12vw);
    font-size: min(10px, 0.8vw);
    line-height: 1.6;
    letter-spacing: min(0.2px, 0.016vw);
  }
}
@media screen and (min-width: 768px) {
  #index #ourVision h3 {
    margin-top: min(230px, 18.4vw);
    width: 80%;
  }
}
@media screen and (min-width: 768px) {
  #index #workStyle {
    margin-top: min(73px, 5.84vw);
  }
}
#index #workStyle picture:not(.wide) {
  order: -1;
}
@media screen and (min-width: 768px) {
  #index #workStyle picture:not(.wide) {
    grid-column: 1/2;
  }
}
#index #workStyle h2 {
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #index #workStyle h2 {
    margin-top: 0;
    grid-column: 2/3;
  }
  #index #workStyle h2 > span:not(.on, .anime) {
    margin-top: min(85px, 6.8vw);
  }
}
@media screen and (min-width: 768px) {
  #index #workStyle p:not(.more) {
    grid-column: 2/3;
  }
  #index #workStyle .wide {
    grid-row: 4;
    margin-top: 13.6805555556vw;
  }
  #index #workStyle h3 {
    margin-top: min(144px, 11.52vw);
    width: 70%;
  }
}
#index #contact img {
  order: -1;
}
#index #contact h2 {
  margin-top: 12.3076923077vw;
}
#index #ourService {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  padding-top: 12.3076923077vw;
  display: block;
}
@media screen and (min-width: 768px) {
  #index #ourService {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #index #ourService {
    padding-top: min(163px, 13.04vw);
  }
}
#index #ourService h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #index #ourService h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#index #ourService h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #index #ourService h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#index #ourService h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#index #ourService h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#index #ourService h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#index #ourService h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#index #ourService h2.animeOn .on span {
  transform: translateY(0);
}
#index #ourService h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#index #ourService h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#index #ourService h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#index #ourService h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
#index #ourService ul {
  margin-top: 6.1538461538vw;
  display: grid;
  grid-template-columns: 1fr;
  gap: 11.5384615385vw;
}
@media screen and (min-width: 768px) {
  #index #ourService ul {
    margin-top: min(79px, 6.32vw);
    grid-template-columns: repeat(3, 1fr);
    gap: min(20px, 1.6vw);
  }
}
#index #ourService ul li {
  padding-bottom: 8.9743589744vw;
  border-bottom: 0.2564102564vw solid #BEBEBE;
}
@media screen and (min-width: 768px) {
  #index #ourService ul li {
    padding-bottom: 0;
    border-bottom: none;
  }
}
#index #ourService ul li:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
#index #ourService ul li dl {
  margin-top: 4.1025641026vw;
  text-align: left;
}
@media screen and (min-width: 768px) {
  #index #ourService ul li dl {
    margin-top: min(24px, 1.92vw);
    width: min(300px, 24vw);
  }
}
#index #ourService ul li dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #index #ourService ul li dl dt {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
@media screen and (min-width: 768px) {
  #index #ourService ul li dl dt {
    font-size: min(24px, 1.92vw);
    line-height: 1.4;
    letter-spacing: max(-1.2px, -0.096vw);
  }
}
#index #ourService ul li dl dd {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #index #ourService ul li dl dd {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #index #ourService ul li dl dd {
    margin-top: min(16px, 1.28vw);
  }
}
#index #ourService .more {
  margin-top: 15.3846153846vw;
  margin-bottom: 12.3076923077vw;
}
#index #ourService .more a {
  font-family: "Manrope", sans-serif;
  padding: 2.8205128205vw 0 2.5641025641vw;
  display: block;
  font-size: 4.1025641026vw;
  line-height: 1;
  position: relative;
  font-weight: 500;
  min-width: 20.5128205128vw;
  width: max-content;
}
@media screen and (min-width: 768px) {
  #index #ourService .more a {
    font-size: min(16px, 1.28vw);
    line-height: 1;
    padding: min(11px, 0.88vw) 0 min(12px, 0.96vw);
    width: min(140px, 11.2vw);
    min-width: auto;
  }
}
#index #ourService .more a:after {
  content: "";
  width: 100%;
  height: 0.2564102564vw;
  background-color: #000;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  transition: transform 0.25s ease-in-out;
  transform-origin: center top;
}
@media screen and (min-width: 768px) {
  #index #ourService .more a:after {
    height: min(1px, 0.08vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #index #ourService .more a:hover:after {
    transform: scaleX(0);
  }
}
@media screen and (min-width: 768px) {
  #index #ourService .more {
    margin-top: min(58px, 4.64vw);
    margin-bottom: 0;
  }
  #index #ourService .more a {
    margin-left: auto;
    margin-right: auto;
  }
}
#index #ourService #join {
  padding-top: 12.3076923077vw;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #index #ourService #join {
    padding-top: min(137px, 10.96vw);
    grid-template-columns: min(400px, 32vw) min(400px, 32vw);
    grid-template-rows: auto auto 1fr auto;
    gap: 0 min(97px, 7.76vw);
  }
}
#index #ourService #join figure {
  order: -1;
}
@media screen and (min-width: 768px) {
  #index #ourService #join figure {
    grid-column: 2/3;
    grid-row: 1/4;
  }
}
#index #ourService #join figure .anime2 {
  transform: translateY(10%);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.14, 1, 0.34, 1);
}
#index #ourService #join figure .animeOn {
  transform: translateY(0);
  opacity: 1;
}
#index #ourService #join h3 {
  order: -2;
}
@media screen and (min-width: 768px) {
  #index #ourService #join h3 {
    grid-row: 1;
    grid-column: 1/3;
    margin: min(231px, 18.48vw) 0 min(219px, 17.52vw);
    width: 60%;
  }
}
@media screen and (min-width: 768px) {
  #index #ourService #join {
    padding-top: 0;
  }
  #index #ourService #join h2 {
    grid-column: 1/2;
    grid-row: 2;
  }
  #index #ourService #join h2 span {
    margin-top: 0;
  }
  #index #ourService #join figure {
    grid-row: 2/5;
  }
  #index #ourService #join p:not(.more) {
    grid-column: 1/2;
    grid-row: 3;
  }
  #index #ourService #join .more {
    margin-top: auto;
    margin-bottom: min(31px, 2.48vw);
    grid-row: 4;
  }
  #index #ourService #join .more a {
    margin-left: 0;
  }
  #index #ourService #join .wide {
    margin-top: 12.5694444444vw;
  }
}
#index #news {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  padding-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #index #news {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #index #news {
    padding-top: min(139px, 11.12vw);
  }
}
#index #news h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #index #news h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#index #news h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #index #news h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#index #news h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#index #news h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#index #news h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#index #news h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#index #news h2.animeOn .on span {
  transform: translateY(0);
}
#index #news h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#index #news h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#index #news h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#index #news h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
#index #news ul {
  margin-top: 8.2051282051vw;
  display: flex;
  flex-direction: column;
  gap: 8.2051282051vw;
}
@media screen and (min-width: 768px) {
  #index #news ul {
    margin-top: min(75px, 6vw);
    display: block;
    margin-left: max(-10px, -0.8vw);
  }
}
@media screen and (min-width: 768px) {
  #index #news ul li {
    width: 41.6666666667vw;
  }
}
#index #news ul li a {
  display: block;
  position: relative;
  transition: background-color 0.25s ease-in-out;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #index #news ul li a {
    padding: min(10px, 0.8vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #index #news ul li a:hover {
    background-color: #f5f5f5;
  }
  #index #news ul li a:hover figure img {
    transform: scale(1.05);
  }
  #index #news ul li a:hover > p:after {
    transform: scaleX(0);
  }
}
#index #news ul li a figure {
  display: grid;
  grid-template-columns: 18.4615384615vw 1fr;
  gap: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #index #news ul li a figure {
    grid-template-columns: min(180px, 14.4vw) 1fr;
    gap: min(22px, 1.76vw);
  }
}
#index #news ul li a figure span {
  width: 100%;
  aspect-ratio: 72/96;
  overflow: hidden;
}
#index #news ul li a figure span img {
  transition: transform 0.25s ease-in-out;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 72/96;
}
#index #news ul li a figure figcaption .date {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.0769230769vw;
  line-height: 1.4;
  font-weight: 500;
  opacity: 0.5;
}
@media screen and (min-width: 768px) {
  #index #news ul li a figure figcaption .date {
    font-size: min(12px, 0.96vw);
    line-height: 1.4;
    position: absolute;
    bottom: min(10px, 0.8vw);
    right: min(10px, 0.8vw);
  }
}
#index #news ul li a figure figcaption h3 {
  margin-top: 1.0256410256vw;
  font-family: "Noto Serif JP", serif;
  font-size: 4.1025641026vw;
  line-height: 1.4;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #index #news ul li a figure figcaption h3 {
    margin-top: 0;
    font-size: min(24px, 1.92vw);
    line-height: 1.4;
  }
}
#index #news ul li a figure figcaption p:not(.date) {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.0769230769vw;
  line-height: 1.4;
  margin-top: 2.0512820513vw;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #index #news ul li a figure figcaption p:not(.date) {
    margin-top: min(17px, 1.36vw);
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    -webkit-line-clamp: 4;
  }
}
#index #news ul li a > p {
  padding: 1.0256410256vw 0 0.7692307692vw;
  font-family: "Manrope", sans-serif;
  font-size: 3.5897435897vw;
  line-height: 1;
  width: max-content;
  position: relative;
  margin-left: auto;
  margin-top: 3.0769230769vw;
  font-weight: 500;
  width: 20.5128205128vw;
}
@media screen and (min-width: 768px) {
  #index #news ul li a > p {
    padding: min(4px, 0.32vw) 0 min(10px, 0.8vw);
    font-size: min(16px, 1.28vw);
    line-height: 1;
    position: absolute;
    bottom: min(10px, 0.8vw);
    left: min(212px, 16.96vw);
    width: min(140px, 11.2vw);
  }
}
#index #news ul li a > p:after {
  content: "";
  width: 100%;
  height: 0.2564102564vw;
  background-color: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  transition: transform 0.25s ease-in-out;
  transform-origin: left top;
}
@media screen and (min-width: 768px) {
  #index #news ul li a > p:after {
    height: min(1px, 0.08vw);
  }
}
@media screen and (min-width: 768px) {
  #index #news ul .slick-track {
    display: flex;
    gap: min(70px, 5.6vw);
    width: max-content;
    flex-direction: row;
  }
}
#index #news ul .slick-next,
#index #news ul .slick-prev {
  border: min(1px, 0.08vw) solid #000;
  height: min(30px, 2.4vw);
  width: min(64px, 5.12vw);
  top: auto;
  left: auto;
  bottom: max(-87px, -6.96vw);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
#index #news ul .slick-next:before,
#index #news ul .slick-prev:before {
  font-size: 0;
  line-height: 0;
  color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='16' fill='none'%3E%3Cpath stroke='%23000' d='M15.692 1 24 8.2l-8.308 7.2M24 8.2H0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  width: min(24px, 1.92vw);
  height: min(15px, 1.2vw);
}
#index #news ul .slick-next.slick-disabled:before,
#index #news ul .slick-prev.slick-disabled:before {
  opacity: 0.1;
}
#index #news ul .slick-next {
  right: min(47px, 3.76vw);
}
#index #news ul .slick-prev {
  right: min(110px, 8.8vw);
}
#index #news ul .slick-prev:before {
  transform: rotate(180deg);
}
#index #contact {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #index #contact {
    padding: 0 1.3888888889vw;
    grid-template-columns: 42.9166666667vw 1fr;
    gap: 0 6.3888888889vw;
  }
}
@media screen and (min-width: 768px) {
  #index #contact {
    margin-top: min(287px, 22.96vw);
  }
  #index #contact h2 {
    grid-column: 1/2;
    margin-top: 0;
  }
  #index #contact h2 > .on {
    position: absolute;
    top: min(3px, 0.24vw);
  }
  #index #contact h2 > span:not(.on, .anime) {
    margin-left: 14.7916666667vw;
    margin-top: 0;
  }
  #index #contact p:not(.more) {
    margin-left: 14.7916666667vw;
  }
  #index #contact .more {
    grid-column: 1/2;
    margin: min(226px, 18.08vw) auto min(50px, 4vw);
  }
}

@media screen and (min-width: 768px) {
  #vision main {
    padding-top: min(66px, 5.28vw);
  }
}
#vision #vision h2,
#vision #editorial h2,
#vision #message h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #vision #vision h2,
  #vision #editorial h2,
  #vision #message h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#vision #vision h2 > span:not(.on, .anime),
#vision #editorial h2 > span:not(.on, .anime),
#vision #message h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #vision #vision h2 > span:not(.on, .anime),
  #vision #editorial h2 > span:not(.on, .anime),
  #vision #message h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#vision #vision h2 > span:not(.on, .anime):nth-of-type(1) .anime,
#vision #editorial h2 > span:not(.on, .anime):nth-of-type(1) .anime,
#vision #message h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#vision #vision h2 > span:not(.on, .anime):nth-of-type(2) .anime,
#vision #editorial h2 > span:not(.on, .anime):nth-of-type(2) .anime,
#vision #message h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#vision #vision h2 .on,
#vision #editorial h2 .on,
#vision #message h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#vision #vision h2.anime .on span,
#vision #editorial h2.anime .on span,
#vision #message h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#vision #vision h2.animeOn .on span,
#vision #editorial h2.animeOn .on span,
#vision #message h2.animeOn .on span {
  transform: translateY(0);
}
#vision #vision h2.anime.animeOn > .on:nth-of-type(1) span,
#vision #editorial h2.anime.animeOn > .on:nth-of-type(1) span,
#vision #message h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#vision #vision h2.anime.animeOn > span > .on:nth-of-type(1) span,
#vision #editorial h2.anime.animeOn > span > .on:nth-of-type(1) span,
#vision #message h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#vision #vision h2.anime.animeOn > span > .on:nth-of-type(2) span,
#vision #editorial h2.anime.animeOn > span > .on:nth-of-type(2) span,
#vision #message h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#vision #vision h2.anime.animeOn > span > .on:nth-of-type(3) span,
#vision #editorial h2.anime.animeOn > span > .on:nth-of-type(3) span,
#vision #message h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
#vision #vision p,
#vision #editorial p,
#vision #message p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #vision #vision p,
  #vision #editorial p,
  #vision #message p {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
#vision #vision h3,
#vision #editorial h3,
#vision #message h3 {
  font-family: "Manrope", sans-serif;
  font-size: 6.1538461538vw;
  line-height: 1.2;
  margin: 20.5128205128vw 0;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #vision #vision h3,
  #vision #editorial h3,
  #vision #message h3 {
    font-size: min(40px, 3.2vw);
    line-height: 1.05;
    margin: 0;
    letter-spacing: max(-0.4px, -0.032vw);
  }
}
#vision #vision h3 .pc,
#vision #editorial h3 .pc,
#vision #message h3 .pc {
  display: none !important;
}
@media screen and (min-width: 768px) {
  #vision #vision h3 .pc,
  #vision #editorial h3 .pc,
  #vision #message h3 .pc {
    display: inline-block !important;
  }
}
#vision #vision h3 .on,
#vision #editorial h3 .on,
#vision #message h3 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#vision #vision h3.anime .on span,
#vision #editorial h3.anime .on span,
#vision #message h3.anime .on span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#vision #vision h3.animeOn .on span,
#vision #editorial h3.animeOn .on span,
#vision #message h3.animeOn .on span {
  transform: translateY(0);
}
#vision #vision picture:not(.wide),
#vision #editorial picture:not(.wide),
#vision #message picture:not(.wide) {
  display: block;
}
@media screen and (min-width: 768px) {
  #vision #vision picture:not(.wide),
  #vision #editorial picture:not(.wide),
  #vision #message picture:not(.wide) {
    width: 100%;
    margin-left: 0;
    grid-row: 1/4;
  }
}
#vision #vision picture:not(.wide) .anime2,
#vision #editorial picture:not(.wide) .anime2,
#vision #message picture:not(.wide) .anime2 {
  transform: translateY(10%);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.14, 1, 0.34, 1);
}
#vision #vision picture:not(.wide) .animeOn,
#vision #editorial picture:not(.wide) .animeOn,
#vision #message picture:not(.wide) .animeOn {
  transform: translateY(0);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #vision #vision picture:not(.wide),
  #vision #editorial picture:not(.wide),
  #vision #message picture:not(.wide) {
    grid-column: 2;
  }
}
#vision #vision .wide,
#vision #editorial .wide,
#vision #message .wide {
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
}
@media screen and (min-width: 768px) {
  #vision #vision .wide,
  #vision #editorial .wide,
  #vision #message .wide {
    width: calc(var(--vw) * 100 - 2.7777777778vw);
    grid-column: 1/3;
    margin-left: 0;
  }
}
#vision #vision .wide .anime2,
#vision #editorial .wide .anime2,
#vision #message .wide .anime2 {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
#vision #vision .wide .animeOn,
#vision #editorial .wide .animeOn,
#vision #message .wide .animeOn {
  opacity: 1;
}
#vision #vision .center,
#vision #editorial .center,
#vision #message .center {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 24.6153846154vw;
}
@media screen and (min-width: 768px) {
  #vision #vision .center,
  #vision #editorial .center,
  #vision #message .center {
    margin: min(135px, 10.8vw) auto 0;
    grid-column: 1/3;
    grid-template-columns: min(400px, 32vw) auto;
    gap: 0 min(97px, 7.76vw);
    width: max-content;
  }
}
#vision #vision .center dl dt,
#vision #editorial .center dl dt,
#vision #message .center dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #vision #vision .center dl dt,
  #vision #editorial .center dl dt,
  #vision #message .center dl dt {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#vision #vision .center dl dd,
#vision #editorial .center dl dd,
#vision #message .center dl dd {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #vision #vision .center dl dd,
  #vision #editorial .center dl dd,
  #vision #message .center dl dd {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #vision #vision .center dl dd,
  #vision #editorial .center dl dd,
  #vision #message .center dl dd {
    margin-top: min(24px, 1.92vw);
  }
}
#vision #vision .more,
#vision #editorial .more,
#vision #message .more {
  margin-top: 15.3846153846vw;
  margin-bottom: 12.3076923077vw;
}
#vision #vision .more a,
#vision #editorial .more a,
#vision #message .more a {
  font-family: "Manrope", sans-serif;
  padding: 2.8205128205vw 0 2.5641025641vw;
  display: block;
  font-size: 4.1025641026vw;
  line-height: 1;
  position: relative;
  font-weight: 500;
  min-width: 20.5128205128vw;
  width: max-content;
}
@media screen and (min-width: 768px) {
  #vision #vision .more a,
  #vision #editorial .more a,
  #vision #message .more a {
    font-size: min(16px, 1.28vw);
    line-height: 1;
    padding: min(11px, 0.88vw) 0 min(12px, 0.96vw);
    width: min(140px, 11.2vw);
    min-width: auto;
  }
}
#vision #vision .more a:after,
#vision #editorial .more a:after,
#vision #message .more a:after {
  content: "";
  width: 100%;
  height: 0.2564102564vw;
  background-color: #000;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  transition: transform 0.25s ease-in-out;
  transform-origin: center top;
}
@media screen and (min-width: 768px) {
  #vision #vision .more a:after,
  #vision #editorial .more a:after,
  #vision #message .more a:after {
    height: min(1px, 0.08vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #vision #vision .more a:hover:after,
  #vision #editorial .more a:hover:after,
  #vision #message .more a:hover:after {
    transform: scaleX(0);
  }
}
@media screen and (min-width: 768px) {
  #vision #vision .more,
  #vision #editorial .more,
  #vision #message .more {
    margin-top: auto;
    margin-bottom: 0;
    grid-row: 3;
  }
}
#vision #vision {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #vision #vision {
    padding: 0 1.3888888889vw;
    grid-template-columns: 42.9166666667vw 1fr;
    gap: 0 6.3888888889vw;
  }
}
#vision #vision h2 {
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #vision #vision h2 {
    grid-column: 1/2;
    margin-top: 0;
  }
  #vision #vision h2 > .on {
    position: absolute;
    top: min(3px, 0.24vw);
  }
  #vision #vision h2 > span:not(.on, .anime) {
    margin-left: 14.7916666667vw;
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  #vision #vision p {
    margin-top: min(24px, 1.92vw);
    grid-row: 2;
    margin-left: 14.7916666667vw;
  }
}
#vision #vision h3 {
  margin-top: 32.8205128205vw;
  width: 80%;
}
@media screen and (min-width: 768px) {
  #vision #vision h3 {
    width: min(438px, 35.04vw);
    margin-top: 0;
  }
}
#vision #vision picture:not(.wide) {
  order: -1;
}
#vision #vision .wide {
  margin-top: 20.5128205128vw;
}
@media screen and (min-width: 768px) {
  #vision #vision .wide {
    margin-top: min(174px, 13.92vw);
  }
}
#vision #editorial,
#vision #message {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 7.6923076923vw;
}
@media screen and (min-width: 768px) {
  #vision #editorial,
  #vision #message {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #vision #editorial,
  #vision #message {
    margin-top: min(134px, 10.72vw);
    grid-template-columns: min(400px, 32vw) 1fr;
    gap: 0 min(97px, 7.76vw);
    grid-template-rows: auto auto 1fr;
  }
}
#vision #editorial h2 > span:not(.on, .anime),
#vision #message h2 > span:not(.on, .anime) {
  margin-top: 0;
}
#vision #editorial h3,
#vision #message h3 {
  margin-top: 43.3333333333vw;
}
@media screen and (min-width: 768px) {
  #vision #editorial h3,
  #vision #message h3 {
    grid-column: 1/3;
    margin-top: min(132px, 10.56vw);
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  #vision #editorial .wide,
  #vision #message .wide {
    margin-left: -14.7916666667vw;
    margin-top: min(120px, 9.6vw);
  }
}
@media screen and (min-width: 768px) {
  #vision #editorial p:not(.more),
  #vision #message p:not(.more) {
    margin-top: min(24px, 1.92vw);
    grid-row: 2;
  }
}
#vision #editorial p:not(.more) strong,
#vision #message p:not(.more) strong {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  display: block;
}
@media screen and (min-width: 768px) {
  #vision #editorial p:not(.more) strong,
  #vision #message p:not(.more) strong {
    font-size: min(20px, 1.6vw);
    line-height: 1.4;
    margin: min(48px, 3.84vw) 0;
  }
}
#vision #editorial .more,
#vision #message .more {
  grid-row: 4;
}
@media screen and (min-width: 768px) {
  #vision #editorial .more,
  #vision #message .more {
    margin-bottom: min(18px, 1.44vw);
  }
}
#vision #editorial figure,
#vision #message figure {
  margin-top: 18.4615384615vw;
}
@media screen and (min-width: 768px) {
  #vision #editorial figure,
  #vision #message figure {
    margin-top: auto;
    grid-row: 1/5;
  }
}
#vision #editorial figure video,
#vision #message figure video {
  width: 100%;
  height: auto;
}
#vision #editorial figure figcaption,
#vision #message figure figcaption {
  text-align: right;
  font-family: "Manrope", sans-serif;
  font-size: 2.5641025641vw;
  line-height: 1;
  font-weight: 500;
  margin-top: 2.0512820513vw;
}
@media screen and (min-width: 768px) {
  #vision #editorial figure figcaption,
  #vision #message figure figcaption {
    margin-top: min(8px, 0.64vw);
    font-size: min(10px, 0.8vw);
    line-height: 1;
  }
}
#vision #message {
  margin-top: 20.5128205128vw;
}
@media screen and (min-width: 768px) {
  #vision #message {
    margin-top: min(120px, 9.6vw);
    grid-template-columns: min(400px, 32vw) min(400px, 32vw);
  }
}
@media screen and (min-width: 768px) {
  #vision #message p {
    margin-top: 0;
    padding-bottom: calc(min(44.8px, 3.584vw) + min(27px, 2.16vw));
  }
}
#vision #message figure {
  display: block;
}
@media screen and (min-width: 768px) {
  #vision #message figure {
    width: 100%;
    margin-left: 0;
    grid-row: 1/4;
  }
}
#vision #message figure .anime2 {
  transform: translateY(10%);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.14, 1, 0.34, 1);
}
#vision #message figure .animeOn {
  transform: translateY(0);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #vision #message figure {
    margin-top: auto;
  }
}
#vision #message figure figcaption {
  text-align: right;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.0769230769vw;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  #vision #message figure figcaption {
    margin-top: min(27px, 2.16vw);
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
  }
}
#vision #whw {
  background-color: #000;
  color: #CACACA;
  position: relative;
  margin-top: 21.5384615385vw;
}
@media screen and (min-width: 768px) {
  #vision #whw {
    margin-top: min(34px, 2.72vw);
  }
}
#vision #whw .inner {
  padding: 12.3076923077vw 5.1282051282vw 12.3076923077vw 13.3333333333vw;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}
@media screen and (min-width: 768px) {
  #vision #whw .inner {
    grid-template-columns: min(390px, 31.2vw) min(401px, 32.08vw);
    gap: 0 min(107px, 8.56vw);
    width: max-content;
    margin: 0 auto 0 14.7916666667vw;
    padding: min(167px, 13.36vw) 0 min(157px, 12.56vw);
  }
}
#vision #whw .illustration {
  display: none;
}
@media screen and (min-width: 768px) {
  #vision #whw .illustration {
    display: block;
    position: sticky;
    top: calc(min(73px, 5.84vw) + min(60px, 4.8vw));
    width: 100%;
    aspect-ratio: 1/1;
  }
  #vision #whw .illustration > span {
    width: 100%;
    aspect-ratio: 1/1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #vision #whw .illustration > span.current:before {
    opacity: 1;
  }
  #vision #whw .illustration > span.current span {
    opacity: 1;
  }
  #vision #whw .illustration > span:before {
    content: "";
    border-radius: 50%;
    border: min(4px, 0.32vw) solid #CACACA;
    aspect-ratio: 1/1;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.2;
    transition: opacity 0.2s ease-in-out;
  }
  #vision #whw .illustration > span.what:before {
    width: 100%;
  }
  #vision #whw .illustration > span.how:before {
    width: min(250px, 20vw);
  }
  #vision #whw .illustration > span.why:before {
    width: min(120px, 9.6vw);
  }
  #vision #whw .illustration > span span {
    font-family: "Manrope", sans-serif;
    font-size: min(18px, 1.44vw);
    line-height: 1.4;
    font-weight: 700;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
}
#vision #whw dl dt span:first-of-type {
  font-size: 7.1794871795vw;
  line-height: 1.4;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  display: block;
}
@media screen and (min-width: 768px) {
  #vision #whw dl dt span:first-of-type {
    font-size: min(28px, 2.24vw);
    line-height: 1.4;
  }
}
#vision #whw dl dt span:last-of-type {
  margin-top: 1.0256410256vw;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.3076923077vw;
  display: block;
}
@media screen and (min-width: 768px) {
  #vision #whw dl dt span:last-of-type {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
@media screen and (min-width: 768px) {
  #vision #whw dl dt span:last-of-type {
    margin-top: min(4px, 0.32vw);
    font-size: min(24px, 1.92vw);
    line-height: 1.4;
  }
}
#vision #whw dl > dd {
  padding-bottom: 8.2051282051vw;
}
@media screen and (min-width: 768px) {
  #vision #whw dl > dd {
    padding-bottom: min(60px, 4.8vw);
  }
}
#vision #whw dl > dd p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 6.1538461538vw;
}
@media screen and (min-width: 768px) {
  #vision #whw dl > dd p {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #vision #whw dl > dd p {
    margin-top: min(24px, 1.92vw);
  }
}
#vision #whw dl > dd p + dl {
  margin-top: 6.1538461538vw;
}
@media screen and (min-width: 768px) {
  #vision #whw dl > dd p + dl {
    margin-top: min(24px, 1.92vw);
  }
}
#vision #whw dl > dd dl {
  display: grid;
  align-items: start;
  justify-content: space-between;
  border-bottom: 0.2564102564vw solid #CACACA;
  grid-template-columns: 1fr;
  padding: 2.8205128205vw 0;
}
@media screen and (min-width: 768px) {
  #vision #whw dl > dd dl {
    grid-template-columns: min(144px, 11.52vw) 1fr;
    padding: min(11px, 0.88vw) 0;
    border-bottom-width: min(1px, 0.08vw);
  }
}
#vision #whw dl > dd dl:first-of-type {
  border-top: 0.2564102564vw solid #CACACA;
}
@media screen and (min-width: 768px) {
  #vision #whw dl > dd dl:first-of-type {
    border-top-width: min(1px, 0.08vw);
  }
}
#vision #whw dl > dd dl dt {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  border: none;
  font-size: 4.1025641026vw;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  #vision #whw dl > dd dl dt {
    font-size: min(16px, 1.28vw);
    line-height: 1.6;
  }
}
#vision #whw dl > dd dl dd {
  padding-bottom: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  letter-spacing: 0.0769230769vw;
}
@media screen and (min-width: 768px) {
  #vision #whw dl > dd dl dd {
    font-size: min(14px, 1.12vw);
    line-height: 1.8285714286;
  }
}
#vision #whw dl > dd + dt {
  padding-top: 8.2051282051vw;
  border-top: 0.2564102564vw solid #CACACA;
}
@media screen and (min-width: 768px) {
  #vision #whw dl > dd + dt {
    padding-top: min(60px, 4.8vw);
    border-top-width: min(1px, 0.08vw);
  }
}

.video-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.video-popup.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
.video-popup .video-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.video-popup .video-popup-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .video-popup .video-popup-content {
    width: 80%;
    max-width: 1000px;
  }
}
.video-popup .video-popup-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-in-out;
}
.video-popup .video-popup-close:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  .video-popup .video-popup-close {
    top: -50px;
    right: -50px;
    font-size: 40px;
    width: 50px;
    height: 50px;
  }
}
.video-popup video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media screen and (min-width: 768px) {
  #workstyle main {
    padding-top: min(66px, 5.28vw);
  }
}
#workstyle #culture .center dl dt,
#workstyle #workplace .center dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #workstyle #culture .center dl dt,
  #workstyle #workplace .center dl dt {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#workstyle #culture .center dl dt .on,
#workstyle #workplace .center dl dt .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#workstyle #culture .center dl dt.anime .on span,
#workstyle #workplace .center dl dt.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#workstyle #culture .center dl dt.animeOn .on span,
#workstyle #workplace .center dl dt.animeOn .on span {
  transform: translateY(0);
}
#workstyle #culture .center dl dt span,
#workstyle #workplace .center dl dt span {
  display: block !important;
}
#workstyle #culture .center dl dt > .on:nth-of-type(1) span,
#workstyle #workplace .center dl dt > .on:nth-of-type(1) span {
  transition-delay: 0s;
}
#workstyle #culture .center dl dt > .on:nth-of-type(2) span,
#workstyle #workplace .center dl dt > .on:nth-of-type(2) span {
  transition-delay: 0.3s;
}
#workstyle #culture .center dl dd,
#workstyle #workplace .center dl dd {
  margin-top: 4.1025641026vw;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
}
@media screen and (min-width: 768px) {
  #workstyle #culture .center dl dd,
  #workstyle #workplace .center dl dd {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
#workstyle #culture .center img,
#workstyle #workplace .center img {
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
}
@media screen and (min-width: 768px) {
  #workstyle #culture .center img,
  #workstyle #workplace .center img {
    width: 27.7777777778vw;
    margin-left: 0;
  }
}
#workstyle #culture .center img.anime2,
#workstyle #workplace .center img.anime2 {
  transform: translateY(10%);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.14, 1, 0.34, 1);
}
#workstyle #culture .center img.animeOn,
#workstyle #workplace .center img.animeOn {
  transform: translateY(0);
  opacity: 1;
}
#workstyle #culture .center img:first-of-type,
#workstyle #workplace .center img:first-of-type {
  margin-top: 17.4358974359vw;
}
@media screen and (min-width: 768px) {
  #workstyle #culture .center img:first-of-type,
  #workstyle #workplace .center img:first-of-type {
    margin-top: 0;
  }
}
#workstyle #culture .center img:last-of-type,
#workstyle #workplace .center img:last-of-type {
  margin-top: 10.2564102564vw;
}
@media screen and (min-width: 768px) {
  #workstyle #culture .center img:last-of-type,
  #workstyle #workplace .center img:last-of-type {
    margin-top: min(170px, 13.6vw);
  }
}
#workstyle #culture {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #workstyle #culture {
    padding: 0 1.3888888889vw;
    grid-template-columns: 42.9166666667vw 1fr;
    gap: 0 6.3888888889vw;
  }
}
#workstyle #culture h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #workstyle #culture h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#workstyle #culture h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #workstyle #culture h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#workstyle #culture h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#workstyle #culture h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#workstyle #culture h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#workstyle #culture h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#workstyle #culture h2.animeOn .on span {
  transform: translateY(0);
}
#workstyle #culture h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#workstyle #culture h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#workstyle #culture h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#workstyle #culture h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #workstyle #culture h2 {
    grid-column: 1/2;
    margin-top: 0;
  }
  #workstyle #culture h2 > .on {
    position: absolute;
    top: min(3px, 0.24vw);
  }
  #workstyle #culture h2 > span:not(.on, .anime) {
    margin-left: 14.7916666667vw;
    margin-top: 0;
  }
}
#workstyle #culture p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #workstyle #culture p {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #workstyle #culture p {
    margin-top: min(24px, 1.92vw);
    grid-row: 2;
    margin-left: 14.7916666667vw;
  }
}
#workstyle #culture h3 {
  font-family: "Manrope", sans-serif;
  font-size: 6.1538461538vw;
  line-height: 1.2;
  margin: 20.5128205128vw 0;
  font-weight: 500;
  width: 80%;
}
@media screen and (min-width: 768px) {
  #workstyle #culture h3 {
    font-size: min(40px, 3.2vw);
    line-height: 1.05;
    margin: 0;
    letter-spacing: max(-0.4px, -0.032vw);
  }
}
#workstyle #culture h3 .pc {
  display: none !important;
}
@media screen and (min-width: 768px) {
  #workstyle #culture h3 .pc {
    display: inline-block !important;
  }
}
#workstyle #culture h3 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#workstyle #culture h3.anime .on span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#workstyle #culture h3.animeOn .on span {
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #workstyle #culture h3 {
    width: min(440px, 35.2vw);
    margin-top: auto;
  }
}
#workstyle #culture picture:not(.wide) {
  display: block;
  grid-row: 1;
}
@media screen and (min-width: 768px) {
  #workstyle #culture picture:not(.wide) {
    width: 100%;
    margin-left: 0;
    grid-row: 1/4;
  }
}
#workstyle #culture picture:not(.wide) .anime2 {
  transform: translateY(10%);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.14, 1, 0.34, 1);
}
#workstyle #culture picture:not(.wide) .animeOn {
  transform: translateY(0);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #workstyle #culture picture:not(.wide) {
    grid-column: 2;
  }
}
#workstyle #culture .wide {
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
}
@media screen and (min-width: 768px) {
  #workstyle #culture .wide {
    width: calc(var(--vw) * 100 - 2.7777777778vw);
    grid-column: 1/3;
    margin-left: 0;
  }
}
#workstyle #culture .wide .anime2 {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
#workstyle #culture .wide .animeOn {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #workstyle #culture .wide {
    margin-top: min(290px, 23.2vw);
  }
}
#workstyle #culture .center {
  margin-top: 24.6153846154vw;
}
@media screen and (min-width: 768px) {
  #workstyle #culture .center {
    margin-top: 29.1666666667vw;
    margin-left: 14.7916666667vw;
    display: grid;
    grid-template-columns: 27.7777777778vw auto;
    gap: 0 6.7361111111vw;
    width: max-content;
  }
}
@media screen and (min-width: 768px) {
  #workstyle #culture .center dl dd {
    margin-top: min(24px, 1.92vw);
  }
}
#workstyle #workplace {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #workstyle #workplace {
    margin-top: min(111px, 8.88vw);
  }
}
#workstyle #workplace h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#workstyle #workplace h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#workstyle #workplace h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#workstyle #workplace h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#workstyle #workplace h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#workstyle #workplace h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#workstyle #workplace h2.animeOn .on span {
  transform: translateY(0);
}
#workstyle #workplace h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#workstyle #workplace h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#workstyle #workplace h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#workstyle #workplace h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .center dl dd {
    margin-top: min(16px, 1.28vw);
  }
}
#workstyle #workplace .culture {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 18.4615384615vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .culture {
    margin-top: min(140px, 11.2vw);
    grid-template-columns: 27.7777777778vw 34.7222222222vw;
    gap: 0 6.7361111111vw;
    grid-template-rows: auto 1fr;
  }
}
#workstyle #workplace .culture h2 {
  margin-top: 18.4615384615vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .culture h2 {
    margin-top: 0;
  }
  #workstyle #workplace .culture h2 > .on span {
    font-size: min(10px, 0.8vw);
    line-height: 1.4;
  }
}
#workstyle #workplace .culture ul {
  margin-top: 6.1538461538vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .culture ul {
    grid-column: 1;
    margin-top: min(20px, 1.6vw);
  }
}
#workstyle #workplace .culture ul li {
  padding: 2.8205128205vw 0;
  border-bottom: 0.2564102564vw solid #CBCBCB;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .culture ul li {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .culture ul li {
    border-bottom-width: min(1px, 0.08vw);
    padding: min(11px, 0.88vw) 0;
  }
}
#workstyle #workplace .culture img {
  grid-row: 2;
  margin-top: 6.1538461538vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .culture img {
    margin-top: 0;
    grid-column: 2;
    grid-row: 1/3;
  }
}
#workstyle #workplace .culture img.anime2 {
  transform: translateY(10%);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.14, 1, 0.34, 1);
}
#workstyle #workplace .culture img.animeOn {
  transform: translateY(0);
  opacity: 1;
}
#workstyle #workplace .culture .center {
  margin-top: 12.3076923077vw;
}
#workstyle #workplace .wide {
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .wide {
    width: calc(var(--vw) * 100 - 2.7777777778vw);
    grid-column: 1/3;
    margin-left: 0;
  }
}
#workstyle #workplace .wide .anime2 {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
#workstyle #workplace .wide .animeOn {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .wide {
    margin-top: min(253px, 20.24vw);
    margin-left: -14.7916666667vw;
  }
}
#workstyle #workplace .pride {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride {
    grid-template-columns: 27.7777777778vw 27.7777777778vw;
    gap: 0 6.7361111111vw;
    margin-top: min(103px, 8.24vw);
  }
}
#workstyle #workplace .pride > * {
  max-width: 82.3076923077vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride > * {
    max-width: calc(var(--vw) * 100 - 1.3888888889vw);
  }
}
#workstyle #workplace .pride h3 {
  font-family: "Manrope", sans-serif;
  font-size: 6.1538461538vw;
  line-height: 1.2;
  margin: 20.5128205128vw 0;
  font-weight: 500;
  grid-row: 1;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride h3 {
    font-size: min(40px, 3.2vw);
    line-height: 1.05;
    margin: 0;
    letter-spacing: max(-0.4px, -0.032vw);
  }
}
#workstyle #workplace .pride h3 .pc {
  display: none !important;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride h3 .pc {
    display: inline-block !important;
  }
}
#workstyle #workplace .pride h3 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#workstyle #workplace .pride h3.anime .on span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#workstyle #workplace .pride h3.animeOn .on span {
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride h3 {
    grid-row: 1/3;
  }
}
#workstyle #workplace .pride h2 {
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride h2 {
    margin-top: 0;
  }
  #workstyle #workplace .pride h2 span {
    margin-top: 0;
  }
}
#workstyle #workplace .pride p:not(.more) {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride p:not(.more) {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride p:not(.more) {
    grid-column: 2;
    margin-top: min(16px, 1.28vw);
  }
}
#workstyle #workplace .pride .more {
  margin-top: 12.3076923077vw;
}
#workstyle #workplace .pride .more a {
  font-family: "Manrope", sans-serif;
  padding: 2.8205128205vw 0 2.5641025641vw;
  display: block;
  font-size: 4.1025641026vw;
  line-height: 1;
  position: relative;
  font-weight: 500;
  min-width: 20.5128205128vw;
  width: max-content;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride .more a {
    font-size: min(16px, 1.28vw);
    line-height: 1;
    padding: min(11px, 0.88vw) 0 min(12px, 0.96vw);
    width: min(140px, 11.2vw);
    min-width: auto;
  }
}
#workstyle #workplace .pride .more a:after {
  content: "";
  width: 100%;
  height: 0.2564102564vw;
  background-color: #000;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  transition: transform 0.25s ease-in-out;
  transform-origin: center top;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride .more a:after {
    height: min(1px, 0.08vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #workstyle #workplace .pride .more a:hover:after {
    transform: scaleX(0);
  }
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride .more {
    margin-top: auto;
    width: 100%;
  }
}
#workstyle #workplace .pride .slide {
  display: flex;
  width: max-content;
  margin-top: 12.3076923077vw;
  padding: 2.5641025641vw 0;
  will-change: transform;
  transform: translateZ(0);
  margin-left: -13.3333333333vw;
  padding-left: 2.5641025641vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride .slide {
    grid-column: 1/3;
    margin-top: min(139px, 11.12vw);
    padding: 0;
    margin-left: -14.7916666667vw;
  }
}
#workstyle #workplace .pride .slide picture {
  width: 76.9230769231vw;
  flex-shrink: 0;
  display: block;
  padding-right: 2.5641025641vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride .slide picture {
    width: 33.3333333333%;
    padding-right: 1.3888888889vw;
  }
}
#workstyle #workplace .pride .slide + p {
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #workstyle #workplace .pride .slide + p {
    margin-top: min(115px, 9.2vw);
    grid-column: 1;
  }
}

@media screen and (min-width: 768px) {
  #recruit main {
    padding-top: min(66px, 5.28vw);
  }
}
#recruit #career h2,
#recruit #service h2,
#recruit #what h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #recruit #career h2,
  #recruit #service h2,
  #recruit #what h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#recruit #career h2 > span:not(.on, .anime),
#recruit #service h2 > span:not(.on, .anime),
#recruit #what h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #recruit #career h2 > span:not(.on, .anime),
  #recruit #service h2 > span:not(.on, .anime),
  #recruit #what h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#recruit #career h2 > span:not(.on, .anime):nth-of-type(1) .anime,
#recruit #service h2 > span:not(.on, .anime):nth-of-type(1) .anime,
#recruit #what h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#recruit #career h2 > span:not(.on, .anime):nth-of-type(2) .anime,
#recruit #service h2 > span:not(.on, .anime):nth-of-type(2) .anime,
#recruit #what h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#recruit #career h2 .on,
#recruit #service h2 .on,
#recruit #what h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#recruit #career h2.anime .on span,
#recruit #service h2.anime .on span,
#recruit #what h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #career h2.animeOn .on span,
#recruit #service h2.animeOn .on span,
#recruit #what h2.animeOn .on span {
  transform: translateY(0);
}
#recruit #career h2.anime.animeOn > .on:nth-of-type(1) span,
#recruit #service h2.anime.animeOn > .on:nth-of-type(1) span,
#recruit #what h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#recruit #career h2.anime.animeOn > span > .on:nth-of-type(1) span,
#recruit #service h2.anime.animeOn > span > .on:nth-of-type(1) span,
#recruit #what h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#recruit #career h2.anime.animeOn > span > .on:nth-of-type(2) span,
#recruit #service h2.anime.animeOn > span > .on:nth-of-type(2) span,
#recruit #what h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#recruit #career h2.anime.animeOn > span > .on:nth-of-type(3) span,
#recruit #service h2.anime.animeOn > span > .on:nth-of-type(3) span,
#recruit #what h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #recruit #career h2,
  #recruit #service h2,
  #recruit #what h2 {
    grid-column: 1/2;
    margin-top: 0;
  }
  #recruit #career h2 > .on,
  #recruit #service h2 > .on,
  #recruit #what h2 > .on {
    position: absolute;
    top: min(3px, 0.24vw);
  }
  #recruit #career h2 > span:not(.on, .anime),
  #recruit #service h2 > span:not(.on, .anime),
  #recruit #what h2 > span:not(.on, .anime) {
    margin-top: 0;
  }
}
#recruit #career p,
#recruit #service p,
#recruit #what p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #recruit #career p,
  #recruit #service p,
  #recruit #what p {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #career p,
  #recruit #service p,
  #recruit #what p {
    margin-top: min(16px, 1.28vw);
    grid-row: 2;
  }
}
#recruit #career h3,
#recruit #service h3,
#recruit #what h3 {
  font-family: "Manrope", sans-serif;
  font-size: 6.1538461538vw;
  line-height: 1.2;
  margin: 20.5128205128vw 0;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #recruit #career h3,
  #recruit #service h3,
  #recruit #what h3 {
    font-size: min(40px, 3.2vw);
    line-height: 1.05;
    margin: 0;
    letter-spacing: max(-0.4px, -0.032vw);
  }
}
#recruit #career h3 .pc,
#recruit #service h3 .pc,
#recruit #what h3 .pc {
  display: none !important;
}
@media screen and (min-width: 768px) {
  #recruit #career h3 .pc,
  #recruit #service h3 .pc,
  #recruit #what h3 .pc {
    display: inline-block !important;
  }
}
#recruit #career h3 .on,
#recruit #service h3 .on,
#recruit #what h3 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#recruit #career h3.anime .on span,
#recruit #service h3.anime .on span,
#recruit #what h3.anime .on span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #career h3.animeOn .on span,
#recruit #service h3.animeOn .on span,
#recruit #what h3.animeOn .on span {
  transform: translateY(0);
}
#recruit #career > picture:not(.wide),
#recruit #service > picture:not(.wide),
#recruit #what > picture:not(.wide) {
  display: block;
  grid-row: 1;
}
@media screen and (min-width: 768px) {
  #recruit #career > picture:not(.wide),
  #recruit #service > picture:not(.wide),
  #recruit #what > picture:not(.wide) {
    width: 100%;
    margin-left: 0;
    grid-row: 1/4;
  }
}
#recruit #career > picture:not(.wide) .anime2,
#recruit #service > picture:not(.wide) .anime2,
#recruit #what > picture:not(.wide) .anime2 {
  transform: translateY(10%);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #career > picture:not(.wide) .animeOn,
#recruit #service > picture:not(.wide) .animeOn,
#recruit #what > picture:not(.wide) .animeOn {
  transform: translateY(0);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #recruit #career > picture:not(.wide),
  #recruit #service > picture:not(.wide),
  #recruit #what > picture:not(.wide) {
    grid-column: 2;
    grid-row: 1/3;
  }
}
#recruit #career {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #recruit #career {
    padding: 0 1.3888888889vw;
    grid-template-columns: 42.9166666667vw 1fr;
    gap: 0 6.3888888889vw;
  }
}
@media screen and (min-width: 768px) {
  #recruit #career h2 > span:not(.on, .anime) {
    margin-left: 14.7916666667vw;
  }
}
@media screen and (min-width: 768px) {
  #recruit #career p {
    margin-left: 14.7916666667vw;
    margin-top: min(24px, 1.92vw);
  }
}
#recruit #career .center {
  margin-top: 24.6153846154vw;
}
@media screen and (min-width: 768px) {
  #recruit #career .center {
    margin-top: min(96px, 7.68vw);
    margin-left: 14.7916666667vw;
    width: 27.7777777778vw;
  }
}
#recruit #career .center dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #recruit #career .center dl dt {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#recruit #career .center dl dt .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#recruit #career .center dl dt.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #career .center dl dt.animeOn .on span {
  transform: translateY(0);
}
#recruit #career .center dl dt span {
  display: block !important;
}
#recruit #career .center dl dt > .on:nth-of-type(1) span {
  transition-delay: 0s;
}
#recruit #career .center dl dt > .on:nth-of-type(2) span {
  transition-delay: 0.3s;
}
#recruit #career .center dl dd {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #recruit #career .center dl dd {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #career .center dl dd {
    margin-top: min(16px, 1.28vw);
  }
}
#recruit #career .center h3 {
  font-family: "Manrope", sans-serif;
  font-size: 6.1538461538vw;
  line-height: 1.2;
  margin: 20.5128205128vw 0;
  font-weight: 500;
  width: 80%;
  margin-top: 32.8205128205vw;
  margin-bottom: 26.6666666667vw;
}
@media screen and (min-width: 768px) {
  #recruit #career .center h3 {
    font-size: min(40px, 3.2vw);
    line-height: 1.05;
    margin: 0;
    letter-spacing: max(-0.4px, -0.032vw);
  }
}
#recruit #career .center h3 .pc {
  display: none !important;
}
@media screen and (min-width: 768px) {
  #recruit #career .center h3 .pc {
    display: inline-block !important;
  }
}
#recruit #career .center h3 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#recruit #career .center h3.anime .on span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #career .center h3.animeOn .on span {
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #recruit #career .center h3 {
    width: 100%;
    margin-top: min(182px, 14.56vw);
  }
}
#recruit #service {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
}
@media screen and (min-width: 768px) {
  #recruit #service {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #recruit #service {
    margin-top: min(182px, 14.56vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #service p {
    width: min(400px, 32vw);
  }
}
#recruit #service ul {
  display: flex;
  flex-direction: column;
  gap: 24.6153846154vw;
  margin-top: 24.6153846154vw;
}
@media screen and (min-width: 768px) {
  #recruit #service ul {
    gap: min(110px, 8.8vw);
    margin-top: min(157px, 12.56vw);
  }
}
#recruit #service ul li {
  position: relative;
}
#recruit #service ul li figure {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #recruit #service ul li figure {
    grid-template-columns: 27.7777777778vw 1fr;
    gap: 6.7361111111vw;
  }
}
#recruit #service ul li figure picture {
  position: absolute;
  top: 12.8205128205vw;
}
@media screen and (min-width: 768px) {
  #recruit #service ul li figure picture {
    position: relative;
    top: 0;
    grid-row: 1;
    grid-column: 2;
  }
}
@media screen and (min-width: 768px) {
  #recruit #service ul li figcaption dl {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
#recruit #service ul li figcaption dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #recruit #service ul li figcaption dl dt {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #service ul li figcaption dl dt {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
  }
}
#recruit #service ul li figcaption dl dd {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 85.1282051282vw;
}
@media screen and (min-width: 768px) {
  #recruit #service ul li figcaption dl dd {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #service ul li figcaption dl dd {
    margin-top: min(16px, 1.28vw);
  }
}
#recruit #service .wide {
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #recruit #service .wide {
    width: calc(var(--vw) * 100 - 2.7777777778vw);
    grid-column: 1/3;
    margin-left: 0;
  }
}
#recruit #service .wide .anime2 {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #service .wide .animeOn {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #recruit #service .wide {
    margin-top: min(182px, 14.56vw);
    margin-left: -14.7916666667vw;
  }
}
#recruit #voice {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
}
@media screen and (min-width: 768px) {
  #recruit #voice {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #recruit #voice {
    margin-top: min(209px, 16.72vw);
    display: grid;
    grid-template-columns: min(400px, 32vw) 1fr;
    gap: min(72px, 5.76vw);
  }
}
#recruit #voice h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #recruit #voice h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#recruit #voice h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #recruit #voice h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#recruit #voice h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#recruit #voice h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#recruit #voice h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#recruit #voice h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #voice h2.animeOn .on span {
  transform: translateY(0);
}
#recruit #voice h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#recruit #voice h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#recruit #voice h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#recruit #voice h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
#recruit #voice .staffImages {
  margin-top: 8.7179487179vw;
}
@media screen and (min-width: 768px) {
  #recruit #voice .staffImages {
    grid-row: 2;
    grid-column: 2;
    margin-top: min(73px, 5.84vw);
    width: 86.6666666667vw;
  }
}
#recruit #voice .staffImages ul {
  margin-left: -10.7692307692vw;
}
@media screen and (min-width: 768px) {
  #recruit #voice .staffImages ul {
    margin-left: 0;
  }
}
#recruit #voice .staffImages ul .slick-track {
  display: flex;
  gap: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #recruit #voice .staffImages ul .slick-track {
    gap: 1.1111111111vw;
  }
}
#recruit #voice .staffImages ul .slick-track li {
  opacity: 0.3;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
  width: 76.9230769231vw;
}
@media screen and (min-width: 768px) {
  #recruit #voice .staffImages ul .slick-track li {
    width: 20.8333333333vw;
  }
}
#recruit #voice .staffImages ul .slick-track li.slick-current {
  opacity: 1;
}
#recruit #voice .staffImages ul .slick-track li figure figcaption {
  font-family: "Manrope", sans-serif;
  font-size: 2.5641025641vw;
  line-height: 1;
  margin-top: 2.0512820513vw;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #recruit #voice .staffImages ul .slick-track li figure figcaption {
    font-size: min(10px, 0.8vw);
    line-height: 1;
    margin-top: min(8px, 0.64vw);
  }
}
#recruit #voice .staffImages .slick-next, #recruit #voice .staffImages .slick-prev {
  background-color: #000;
}
#recruit #voice .staffImages .slick-next {
  right: auto;
}
#recruit #voice .staffTexts {
  margin-top: 14.8717948718vw;
}
@media screen and (min-width: 768px) {
  #recruit #voice .staffTexts {
    margin-top: min(73px, 5.84vw);
    grid-row: 2;
  }
}
#recruit #voice .staffTexts div {
  display: none;
}
#recruit #voice .staffTexts div.current {
  display: block;
}
#recruit #voice .staffTexts div dl dt {
  font-family: "Manrope", sans-serif;
  font-size: 6.1538461538vw;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  #recruit #voice .staffTexts div dl dt {
    font-size: min(24px, 1.92vw);
    line-height: 1;
  }
}
#recruit #voice .staffTexts div dl dd {
  margin-top: 6.1538461538vw;
  font-size: 3.5897435897vw;
  line-height: 1.6;
  letter-spacing: 0.0717948718vw;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #recruit #voice .staffTexts div dl dd {
    margin-top: min(31px, 2.48vw);
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
#recruit #voice .wide {
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #recruit #voice .wide {
    width: calc(var(--vw) * 100 - 2.7777777778vw);
    grid-column: 1/3;
    margin-left: 0;
  }
}
#recruit #voice .wide .anime2 {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #voice .wide .animeOn {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #recruit #voice .wide {
    margin-top: min(194px, 15.52vw);
    margin-left: -14.7916666667vw;
  }
}
#recruit #what {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
}
@media screen and (min-width: 768px) {
  #recruit #what {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #recruit #what {
    margin-top: min(182px, 14.56vw);
  }
}
#recruit #what .center {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #recruit #what .center {
    grid-template-columns: 27.7777777778vw 1fr;
    gap: 0 6.0416666667vw;
  }
}
@media screen and (min-width: 768px) {
  #recruit #what .center h3 {
    grid-row: 1/3;
  }
}
#recruit #what .slide {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  #recruit #what .slide {
    margin-top: min(154px, 12.32vw);
  }
}
#recruit #what .slide ul {
  display: flex;
  flex-direction: column;
  gap: 24.6153846154vw;
}
@media screen and (min-width: 768px) {
  #recruit #what .slide ul {
    width: max-content;
    flex-direction: row;
    gap: 0;
  }
}
#recruit #what .slide ul li {
  position: relative;
}
@media screen and (min-width: 768px) {
  #recruit #what .slide ul li figure {
    position: relative;
    top: 0;
    width: 23.6111111111vw;
    padding-right: min(16px, 1.28vw);
  }
}
#recruit #what .slide ul li figure picture {
  position: absolute;
  top: 12.8205128205vw;
}
@media screen and (min-width: 768px) {
  #recruit #what .slide ul li figure picture {
    position: relative;
    top: 0;
  }
}
#recruit #what .slide ul li figcaption dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #recruit #what .slide ul li figcaption dl dt {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #what .slide ul li figcaption dl dt {
    font-size: min(24px, 1.92vw);
    line-height: 1.4;
    letter-spacing: max(-1.2px, -0.096vw);
    margin-top: min(24px, 1.92vw);
  }
}
#recruit #what .slide ul li figcaption dl dd {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 85.1282051282vw;
}
@media screen and (min-width: 768px) {
  #recruit #what .slide ul li figcaption dl dd {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #what .slide ul li figcaption dl dd {
    margin-top: min(16px, 1.28vw);
  }
}
#recruit #what h3 {
  margin-top: 32.8205128205vw;
  margin-bottom: 32.8205128205vw;
}
@media screen and (min-width: 768px) {
  #recruit #what h3 {
    margin-top: 0;
    margin-bottom: 0;
    width: 70%;
  }
}
#recruit #day {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 18.4615384615vw;
}
@media screen and (min-width: 768px) {
  #recruit #day {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #recruit #day {
    margin-top: min(298px, 23.84vw);
    grid-template-columns: 27.7777777778vw 1fr;
    gap: 0 6.7361111111vw;
    position: relative;
    padding-right: 7.7083333333vw;
  }
}
#recruit #day h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #recruit #day h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#recruit #day h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #recruit #day h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#recruit #day h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#recruit #day h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#recruit #day h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#recruit #day h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #day h2.animeOn .on span {
  transform: translateY(0);
}
#recruit #day h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#recruit #day h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#recruit #day h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#recruit #day h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #recruit #day h2 {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
  }
}
@media screen and (min-width: 768px) {
  #recruit #day .nav {
    grid-column: 2;
    grid-row: 2;
    z-index: 1;
  }
}
#recruit #day .nav ul {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 6.1538461538vw;
  gap: 3.0769230769vw;
}
@media screen and (min-width: 768px) {
  #recruit #day .nav ul {
    margin-top: min(31px, 2.48vw);
    grid-template-columns: 1fr 1fr;
    gap: min(12px, 0.96vw) min(32px, 2.56vw);
  }
}
#recruit #day .nav ul li {
  display: block;
  font-family: "Manrope", sans-serif;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
  border-bottom: 0.2564102564vw solid #000;
  padding: 2.5641025641vw 0;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #recruit #day .nav ul li {
    border-bottom-width: min(1px, 0.08vw);
    padding: min(10px, 0.8vw) 0;
    font-size: min(16px, 1.28vw);
    line-height: 1;
  }
}
@media (hover: hover) and (pointer: fine) {
  #recruit #day .nav ul li:hover {
    opacity: 0.6;
  }
}
#recruit #day .nav ul li.current {
  opacity: 1;
}
#recruit #day .timeline {
  display: none;
  margin-top: 17.4358974359vw;
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline {
    grid-column: 1/3;
    grid-row: 1/4;
    position: relative;
    grid-template-columns: 27.7777777778vw 1fr;
    gap: 0 6.7361111111vw;
    margin-top: 0;
  }
}
#recruit #day .timeline.current {
  display: grid;
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline figure {
    position: sticky;
    top: min(100px, 8vw);
    left: 0;
    grid-row: 1/20;
    height: fit-content;
  }
}
#recruit #day .timeline figure figcaption {
  font-family: "Manrope", sans-serif;
  font-size: 2.5641025641vw;
  line-height: 1;
  margin-top: 2.5641025641vw;
  margin-bottom: 10.2564102564vw;
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline figure figcaption {
    margin-top: min(15px, 1.2vw);
    margin-bottom: 0;
    font-size: min(12px, 0.96vw);
    line-height: 1;
  }
}
#recruit #day .timeline > dl {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 0.2564102564vw solid #000;
  padding-bottom: 6.1538461538vw;
  margin-bottom: 6.1538461538vw;
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline > dl {
    grid-template-columns: min(126px, 10.08vw) 1fr;
    border-bottom-width: min(1px, 0.08vw);
    padding-bottom: min(40px, 3.2vw);
    margin-bottom: min(40px, 3.2vw);
    grid-column: 2;
  }
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline > dl:first-of-type {
    margin-top: min(282px, 22.56vw);
  }
}
#recruit #day .timeline > dl dt {
  font-family: "Manrope", sans-serif;
  font-size: 6.1538461538vw;
  line-height: 1.5;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline > dl dt {
    font-size: min(24px, 1.92vw);
    line-height: 1.5;
  }
}
#recruit #day .timeline > dl dt span {
  margin-left: 3.0769230769vw;
  font-size: 4.6153846154vw;
  line-height: 1;
  letter-spacing: -0.2307692308vw;
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline > dl dt span {
    margin-left: min(12px, 0.96vw);
    font-size: min(18px, 1.44vw);
    line-height: 1;
    letter-spacing: max(-0.9px, -0.072vw);
  }
}
#recruit #day .timeline > dl dd dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.3076923077vw;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  letter-spacing: -0.3076923077vw;
  margin-top: 2.0512820513vw;
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline > dl dd dl dt {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline > dl dd dl dt {
    font-size: min(24px, 1.92vw);
    line-height: 1.4;
    letter-spacing: max(-1.2px, -0.096vw);
    margin-top: 0;
  }
}
#recruit #day .timeline > dl dd dl dd {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 3.0769230769vw;
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline > dl dd dl dd {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #day .timeline > dl dd dl dd {
    margin-top: min(12px, 0.96vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #recruit #day .timeline > dl dd dl dd a:hover {
    text-decoration: underline;
  }
}
#recruit #faq {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 24.6153846154vw;
}
@media screen and (min-width: 768px) {
  #recruit #faq {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #recruit #faq {
    margin-top: min(173px, 13.84vw);
    grid-template-columns: 27.7777777778vw 1fr;
    gap: 0 6.7361111111vw;
    padding-right: 7.7083333333vw;
    overflow-x: visible;
  }
}
#recruit #faq h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 17.4358974359vw;
}
@media screen and (min-width: 768px) {
  #recruit #faq h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#recruit #faq h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #recruit #faq h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#recruit #faq h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#recruit #faq h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#recruit #faq h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#recruit #faq h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #faq h2.animeOn .on span {
  transform: translateY(0);
}
#recruit #faq h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#recruit #faq h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#recruit #faq h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#recruit #faq h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #recruit #faq h2 {
    margin-bottom: 0;
  }
}
#recruit #faq h2 > span:not(.on, .anime) {
  margin-top: 0;
}
#recruit #faq dl {
  border-bottom: 0.2564102564vw solid #000;
  padding-bottom: 5.8974358974vw;
  margin-bottom: 5.8974358974vw;
}
@media screen and (min-width: 768px) {
  #recruit #faq dl {
    grid-column: 2;
    padding-bottom: min(23px, 1.84vw);
    border-bottom-width: min(1px, 0.08vw);
    margin-bottom: min(23px, 1.84vw);
  }
}
#recruit #faq dl.open dt:after {
  display: none;
}
#recruit #faq dl.open dd {
  max-height: 500px;
  opacity: 0.6;
  margin-top: 4.1025641026vw;
  transition: max-height 4s cubic-bezier(0.14, 1, 0.34, 1), opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
@media screen and (min-width: 768px) {
  #recruit #faq dl.open dd {
    margin-top: min(16px, 1.28vw);
  }
}
#recruit #faq dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.3076923077vw;
  display: grid;
  grid-template-columns: 1fr 6.1538461538vw;
  gap: 0 10vw;
  cursor: pointer;
  align-items: center;
}
@media screen and (min-width: 768px) {
  #recruit #faq dl dt {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #faq dl dt {
    font-size: min(24px, 1.92vw);
    line-height: 1.4;
    grid-template-columns: 1fr min(24px, 1.92vw);
    align-items: center;
    gap: 0;
  }
}
#recruit #faq dl dt:after {
  content: "";
  width: 100%;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23000' d='M0-.5h24' transform='rotate(89.993 6 6) skewX(-.013)'/%3E%3Cpath stroke='%23000' d='M0-.5h24' transform='rotate(-180 12 6) skewX(.013)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
#recruit #faq dl dd {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0s cubic-bezier(0.14, 1, 0.34, 1), opacity 0s cubic-bezier(0.14, 1, 0.34, 1);
}
@media screen and (min-width: 768px) {
  #recruit #faq dl dd {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
#recruit #faq .wide {
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
  margin-top: 12.0512820513vw;
}
@media screen and (min-width: 768px) {
  #recruit #faq .wide {
    width: calc(var(--vw) * 100 - 2.7777777778vw);
    grid-column: 1/3;
    margin-left: 0;
  }
}
#recruit #faq .wide .anime2 {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
#recruit #faq .wide .animeOn {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #recruit #faq .wide {
    margin-top: min(172px, 13.76vw);
    margin-left: -14.7916666667vw;
    grid-column: 1/4;
  }
}
#recruit #faq .join {
  margin-top: 11.5384615385vw;
}
@media screen and (min-width: 768px) {
  #recruit #faq .join {
    grid-column: 1/3;
    margin-top: min(172px, 13.76vw);
    display: grid;
    grid-template-columns: 27.7777777778vw 27.7777777778vw;
    gap: 0 6.7361111111vw;
  }
}
#recruit #faq .join h2 {
  margin-bottom: 0;
}
#recruit #faq .join p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 6.1538461538vw;
}
@media screen and (min-width: 768px) {
  #recruit #faq .join p {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #recruit #faq .join p {
    margin-top: min(16px, 1.28vw);
    grid-column: 1;
  }
}
#recruit #faq .join .more {
  margin-top: 14.358974359vw;
}
#recruit #faq .join .more a {
  font-family: "Manrope", sans-serif;
  padding: 2.8205128205vw 0 2.5641025641vw;
  display: block;
  font-size: 4.1025641026vw;
  line-height: 1;
  position: relative;
  font-weight: 500;
  min-width: 20.5128205128vw;
  width: max-content;
}
@media screen and (min-width: 768px) {
  #recruit #faq .join .more a {
    font-size: min(16px, 1.28vw);
    line-height: 1;
    padding: min(11px, 0.88vw) 0 min(12px, 0.96vw);
    width: min(140px, 11.2vw);
    min-width: auto;
  }
}
#recruit #faq .join .more a:after {
  content: "";
  width: 100%;
  height: 0.2564102564vw;
  background-color: #000;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  transition: transform 0.25s ease-in-out;
  transform-origin: center top;
}
@media screen and (min-width: 768px) {
  #recruit #faq .join .more a:after {
    height: min(1px, 0.08vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #recruit #faq .join .more a:hover:after {
    transform: scaleX(0);
  }
}
@media screen and (min-width: 768px) {
  #recruit #faq .join .more {
    grid-column: 2;
    margin-top: auto;
    justify-self: end;
  }
}

@media screen and (min-width: 768px) {
  #about main {
    padding-top: min(66px, 5.28vw);
  }
}
#about #about h2,
#about #service h2,
#about #history h2,
#about #information h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #about #about h2,
  #about #service h2,
  #about #history h2,
  #about #information h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#about #about h2 > span:not(.on, .anime),
#about #service h2 > span:not(.on, .anime),
#about #history h2 > span:not(.on, .anime),
#about #information h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #about #about h2 > span:not(.on, .anime),
  #about #service h2 > span:not(.on, .anime),
  #about #history h2 > span:not(.on, .anime),
  #about #information h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#about #about h2 > span:not(.on, .anime):nth-of-type(1) .anime,
#about #service h2 > span:not(.on, .anime):nth-of-type(1) .anime,
#about #history h2 > span:not(.on, .anime):nth-of-type(1) .anime,
#about #information h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#about #about h2 > span:not(.on, .anime):nth-of-type(2) .anime,
#about #service h2 > span:not(.on, .anime):nth-of-type(2) .anime,
#about #history h2 > span:not(.on, .anime):nth-of-type(2) .anime,
#about #information h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#about #about h2 .on,
#about #service h2 .on,
#about #history h2 .on,
#about #information h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#about #about h2.anime .on span,
#about #service h2.anime .on span,
#about #history h2.anime .on span,
#about #information h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#about #about h2.animeOn .on span,
#about #service h2.animeOn .on span,
#about #history h2.animeOn .on span,
#about #information h2.animeOn .on span {
  transform: translateY(0);
}
#about #about h2.anime.animeOn > .on:nth-of-type(1) span,
#about #service h2.anime.animeOn > .on:nth-of-type(1) span,
#about #history h2.anime.animeOn > .on:nth-of-type(1) span,
#about #information h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#about #about h2.anime.animeOn > span > .on:nth-of-type(1) span,
#about #service h2.anime.animeOn > span > .on:nth-of-type(1) span,
#about #history h2.anime.animeOn > span > .on:nth-of-type(1) span,
#about #information h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#about #about h2.anime.animeOn > span > .on:nth-of-type(2) span,
#about #service h2.anime.animeOn > span > .on:nth-of-type(2) span,
#about #history h2.anime.animeOn > span > .on:nth-of-type(2) span,
#about #information h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#about #about h2.anime.animeOn > span > .on:nth-of-type(3) span,
#about #service h2.anime.animeOn > span > .on:nth-of-type(3) span,
#about #history h2.anime.animeOn > span > .on:nth-of-type(3) span,
#about #information h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #about #about h2,
  #about #service h2,
  #about #history h2,
  #about #information h2 {
    grid-column: 1/2;
    margin-top: 0;
  }
  #about #about h2 > span:not(.on, .anime),
  #about #service h2 > span:not(.on, .anime),
  #about #history h2 > span:not(.on, .anime),
  #about #information h2 > span:not(.on, .anime) {
    margin-top: 0;
  }
}
#about #about p,
#about #service p,
#about #history p,
#about #information p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #about #about p,
  #about #service p,
  #about #history p,
  #about #information p {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #about #about p,
  #about #service p,
  #about #history p,
  #about #information p {
    margin-top: min(16px, 1.28vw);
    grid-row: 2;
  }
}
#about #about h3,
#about #service h3,
#about #history h3,
#about #information h3 {
  font-family: "Manrope", sans-serif;
  font-size: 6.1538461538vw;
  line-height: 1.2;
  margin: 20.5128205128vw 0;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #about #about h3,
  #about #service h3,
  #about #history h3,
  #about #information h3 {
    font-size: min(40px, 3.2vw);
    line-height: 1.05;
    margin: 0;
    letter-spacing: max(-0.4px, -0.032vw);
  }
}
#about #about h3 .pc,
#about #service h3 .pc,
#about #history h3 .pc,
#about #information h3 .pc {
  display: none !important;
}
@media screen and (min-width: 768px) {
  #about #about h3 .pc,
  #about #service h3 .pc,
  #about #history h3 .pc,
  #about #information h3 .pc {
    display: inline-block !important;
  }
}
#about #about h3 .on,
#about #service h3 .on,
#about #history h3 .on,
#about #information h3 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#about #about h3.anime .on span,
#about #service h3.anime .on span,
#about #history h3.anime .on span,
#about #information h3.anime .on span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#about #about h3.animeOn .on span,
#about #service h3.animeOn .on span,
#about #history h3.animeOn .on span,
#about #information h3.animeOn .on span {
  transform: translateY(0);
}
#about #about > picture:not(.wide),
#about #service > picture:not(.wide),
#about #history > picture:not(.wide),
#about #information > picture:not(.wide) {
  display: block;
  grid-row: 1;
}
@media screen and (min-width: 768px) {
  #about #about > picture:not(.wide),
  #about #service > picture:not(.wide),
  #about #history > picture:not(.wide),
  #about #information > picture:not(.wide) {
    width: 100%;
    margin-left: 0;
    grid-row: 1/4;
  }
}
#about #about > picture:not(.wide) .anime2,
#about #service > picture:not(.wide) .anime2,
#about #history > picture:not(.wide) .anime2,
#about #information > picture:not(.wide) .anime2 {
  transform: translateY(10%);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.14, 1, 0.34, 1);
}
#about #about > picture:not(.wide) .animeOn,
#about #service > picture:not(.wide) .animeOn,
#about #history > picture:not(.wide) .animeOn,
#about #information > picture:not(.wide) .animeOn {
  transform: translateY(0);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #about #about > picture:not(.wide),
  #about #service > picture:not(.wide),
  #about #history > picture:not(.wide),
  #about #information > picture:not(.wide) {
    grid-column: 2;
    grid-row: 1/3;
  }
}
#about #about {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #about #about {
    padding: 0 1.3888888889vw;
    grid-template-columns: 42.9166666667vw 1fr;
    gap: 0 6.3888888889vw;
  }
}
@media screen and (min-width: 768px) {
  #about #about {
    grid-template-rows: auto 1fr;
  }
}
@media screen and (min-width: 768px) {
  #about #about h2 {
    width: 80%;
  }
}
@media screen and (min-width: 768px) {
  #about #about h2 > .on {
    top: min(3px, 0.24vw);
    position: absolute;
  }
}
@media screen and (min-width: 768px) {
  #about #about h2 > span:not(.on, .anime) {
    margin-left: 14.7916666667vw;
  }
}
@media screen and (min-width: 768px) {
  #about #about p {
    margin-left: 14.7916666667vw;
    margin-top: min(24px, 1.92vw);
  }
}
@media screen and (min-width: 768px) {
  #about #about h3 {
    margin-left: 14.7916666667vw;
    margin-top: min(148px, 11.84vw);
  }
}
#about #service {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
}
@media screen and (min-width: 768px) {
  #about #service {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #about #service {
    margin-top: min(182px, 14.56vw);
  }
}
@media screen and (min-width: 768px) {
  #about #service p {
    width: min(400px, 32vw);
  }
}
#about #service ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24.6153846154vw;
  margin-top: 24.6153846154vw;
}
@media screen and (min-width: 768px) {
  #about #service ul {
    gap: min(110px, 8.8vw);
    margin-top: min(79px, 6.32vw);
    grid-template-columns: repeat(3, 1fr);
    gap: 1.0416666667vw;
  }
}
#about #service ul li {
  position: relative;
}
#about #service ul li figure {
  display: grid;
  grid-template-columns: 1fr;
}
#about #service ul li figure picture {
  position: absolute;
  top: 12.8205128205vw;
}
@media screen and (min-width: 768px) {
  #about #service ul li figure picture {
    position: relative;
    top: 0;
    grid-row: 1 !important;
  }
}
@media screen and (min-width: 768px) {
  #about #service ul li figcaption dl {
    width: 20.8333333333vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
#about #service ul li figcaption dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #about #service ul li figcaption dl dt {
    font-size: min(30px, 2.4vw);
    line-height: 1.4;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
@media screen and (min-width: 768px) {
  #about #service ul li figcaption dl dt {
    margin-top: min(24px, 1.92vw);
    font-size: min(24px, 1.92vw);
    line-height: 1.4;
    letter-spacing: max(-1.2px, -0.096vw);
  }
}
#about #service ul li figcaption dl dd {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 90vw;
}
@media screen and (min-width: 768px) {
  #about #service ul li figcaption dl dd {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #about #service ul li figcaption dl dd {
    margin-top: min(16px, 1.28vw);
  }
}
#about #service .wide {
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #about #service .wide {
    width: calc(var(--vw) * 100 - 2.7777777778vw);
    grid-column: 1/3;
    margin-left: 0;
  }
}
#about #service .wide .anime2 {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
#about #service .wide .animeOn {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #about #service .wide {
    margin-top: min(156px, 12.48vw);
    margin-left: -14.7916666667vw;
  }
}
#about #service .wide figcaption {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.5641025641vw;
  line-height: 1.6;
  letter-spacing: 0.0512820513vw;
  text-align: right;
  margin-top: 2.0512820513vw;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #about #service .wide figcaption {
    margin-top: min(14px, 1.12vw);
    font-size: min(10px, 0.8vw);
    line-height: 1.6;
    letter-spacing: min(0.2px, 0.016vw);
  }
}
#about #history {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
}
@media screen and (min-width: 768px) {
  #about #history {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
@media screen and (min-width: 768px) {
  #about #history {
    margin-top: min(79px, 6.32vw);
  }
}
#about #history .slide {
  margin-top: 25.641025641vw;
}
@media screen and (min-width: 768px) {
  #about #history .slide {
    margin-top: min(150px, 12vw);
  }
}
#about #history .slide ul {
  position: relative;
  display: flex;
  width: max-content;
  gap: 20.5128205128vw;
}
@media screen and (min-width: 768px) {
  #about #history .slide ul {
    gap: min(80px, 6.4vw);
  }
}
#about #history .slide ul:before {
  content: "";
  width: calc(100% - 30.7692307692vw);
  height: 0.2564102564vw;
  background-color: #000;
  position: absolute;
  top: 17.9487179487vw;
  left: 30.7692307692vw;
}
@media screen and (min-width: 768px) {
  #about #history .slide ul:before {
    height: min(1px, 0.08vw);
    width: calc(100% - min(120px, 9.6vw));
    left: min(120px, 9.6vw);
    top: min(70px, 5.6vw);
  }
}
#about #history .slide ul:after {
  content: "";
  width: 7.6923076923vw;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #fff;
  border: 0.2564102564vw solid #000;
  position: absolute;
  top: 17.9487179487vw;
  left: 30.7692307692vw;
  transform: translateY(-3.8461538462vw);
}
@media screen and (min-width: 768px) {
  #about #history .slide ul:after {
    width: min(30px, 2.4vw);
    top: min(70px, 5.6vw);
    left: min(120px, 9.6vw);
    border-width: min(1px, 0.08vw);
    transform: translateY(max(-15px, -1.2vw));
  }
}
#about #history .slide ul li {
  width: 64.1025641026vw;
  position: relative;
}
@media screen and (min-width: 768px) {
  #about #history .slide ul li {
    width: min(270px, 21.6vw);
  }
}
#about #history .slide ul li figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#about #history .slide ul li figure img {
  height: 46.1538461538vw;
  width: auto;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 29.2307692308vw;
}
@media screen and (min-width: 768px) {
  #about #history .slide ul li figure img {
    height: min(200px, 16vw);
    top: min(114px, 9.12vw);
  }
}
#about #history .slide ul li figcaption {
  order: -1;
}
#about #history .slide ul li figcaption dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 5.1282051282vw;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  #about #history .slide ul li figcaption dl dt {
    font-size: min(20px, 1.6vw);
    line-height: 1.4;
  }
}
#about #history .slide ul li figcaption dl dt span {
  display: block;
  margin-top: 74.358974359vw;
  text-align: left;
  font-size: 4.1025641026vw;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  #about #history .slide ul li figcaption dl dt span {
    margin-top: min(310px, 24.8vw);
    font-size: min(16px, 1.28vw);
    line-height: 1.4;
  }
}
#about #history .slide ul li figcaption dl dd {
  font-size: 3.0769230769vw;
  line-height: 1.6;
  letter-spacing: 0.0717948718vw;
  opacity: 0.7;
  margin-top: 2.0512820513vw;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #about #history .slide ul li figcaption dl dd {
    font-size: min(12px, 0.96vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
    margin-top: min(8px, 0.64vw);
  }
}
#about #history .slide ul li:not(:first-of-type):after {
  content: "";
  width: 0.2564102564vw;
  height: 4.1025641026vw;
  background-color: #000;
  position: absolute;
  top: 17.9487179487vw;
  left: 50%;
  transform: translateY(-2.0512820513vw);
}
@media screen and (min-width: 768px) {
  #about #history .slide ul li:not(:first-of-type):after {
    width: min(1px, 0.08vw);
    height: min(16px, 1.28vw);
    transform: translateY(max(-8px, -0.64vw));
    top: min(70px, 5.6vw);
  }
}
#about #history .slide ul li:last-of-type {
  width: max-content;
  font-family: "Manrope", sans-serif;
  font-size: 6.1538461538vw;
  line-height: 1.2;
  font-weight: 600;
  padding-left: 10.2564102564vw;
  background-color: #fff;
  padding-top: 5.1282051282vw;
}
@media screen and (min-width: 768px) {
  #about #history .slide ul li:last-of-type {
    font-size: min(24px, 1.92vw);
    line-height: 1.2;
    padding-left: min(40px, 3.2vw);
    padding-top: min(20px, 1.6vw);
  }
}
#about #history .slide ul li:last-of-type:after {
  display: none;
}
#about #history .wide {
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #about #history .wide {
    width: calc(var(--vw) * 100 - 2.7777777778vw);
    grid-column: 1/3;
    margin-left: 0;
  }
}
#about #history .wide .anime2 {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
#about #history .wide .animeOn {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #about #history .wide {
    margin-top: min(132px, 10.56vw);
    margin-left: -14.7916666667vw;
  }
}
#about #history .wide figcaption {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.5641025641vw;
  line-height: 1.6;
  letter-spacing: 0.0512820513vw;
  text-align: right;
  margin-top: 2.0512820513vw;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #about #history .wide figcaption {
    margin-top: min(14px, 1.12vw);
    font-size: min(10px, 0.8vw);
    line-height: 1.6;
    letter-spacing: min(0.2px, 0.016vw);
  }
}
@media screen and (min-width: 768px) {
  #about #history h3 {
    width: 40%;
    margin-top: min(151px, 12.08vw);
  }
}
#about #information {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #about #information {
    padding: 0 1.3888888889vw;
    grid-template-columns: 42.9166666667vw 1fr;
    gap: 0 6.3888888889vw;
  }
}
@media screen and (min-width: 768px) {
  #about #information {
    margin-top: min(103px, 8.24vw);
  }
}
#about #information > picture:not(.wide) {
  grid-row: 3;
  width: 93.8461538462vw;
  margin-left: -10.2564102564vw;
  display: block;
  margin-top: 6.1538461538vw;
}
@media screen and (min-width: 768px) {
  #about #information > picture:not(.wide) {
    width: calc(var(--vw) * 100 - 2.7777777778vw);
    grid-column: 1/3;
    margin-left: 0;
  }
}
#about #information > picture:not(.wide) .anime2 {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.14, 1, 0.34, 1);
}
#about #information > picture:not(.wide) .animeOn {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #about #information > picture:not(.wide) {
    width: 100%;
    grid-row: 1/3;
    grid-column: 2;
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  #about #information h2 > .on {
    top: min(3px, 0.24vw);
    position: absolute;
  }
}
@media screen and (min-width: 768px) {
  #about #information h2 > span:not(.on, .anime) {
    margin-left: 14.7916666667vw;
  }
}
#about #information ul {
  grid-column: 1;
  margin-top: 15.3846153846vw;
}
@media screen and (min-width: 768px) {
  #about #information ul {
    margin-left: 14.7916666667vw;
    margin-top: min(44px, 3.52vw);
  }
}
#about #information ul li {
  border-bottom: 0.2564102564vw solid #000;
  padding: 3.0769230769vw 0 2.8205128205vw;
}
@media screen and (min-width: 768px) {
  #about #information ul li {
    padding: min(12px, 0.96vw) 0 min(11px, 0.88vw);
    border-bottom: min(1px, 0.08vw) solid #000;
  }
}
#about #information ul li dl {
  display: grid;
  font-family: "Noto Sans JP", sans-serif;
  grid-template-columns: 19.4871794872vw 1fr;
  font-size: 3.5897435897vw;
  line-height: 1.6;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #about #information ul li dl {
    grid-template-columns: min(100px, 8vw) 1fr;
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
  }
}

@media screen and (min-width: 768px) {
  #contact main {
    padding-top: min(66px, 5.28vw);
  }
}
#contact #form {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #contact #form {
    padding: 0 10.6944444444vw 0 1.3888888889vw;
    grid-template-columns: 1fr 44.4444444444vw;
    gap: 0 6.7361111111vw;
  }
}
#contact #form h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #contact #form h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#contact #form h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #contact #form h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#contact #form h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#contact #form h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#contact #form h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#contact #form h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#contact #form h2.animeOn .on span {
  transform: translateY(0);
}
#contact #form h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#contact #form h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#contact #form h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#contact #form h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #contact #form h2 {
    grid-column: 1/2;
    margin-top: 0;
  }
  #contact #form h2 > .on {
    position: absolute;
    top: min(3px, 0.24vw);
  }
}
@media screen and (min-width: 768px) {
  #contact #form h2 > span:not(.on, .anime) {
    margin-left: 14.7916666667vw;
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  #contact #form .form {
    grid-column: 2/3;
    grid-row: 1/4;
  }
}
#contact #form .form h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  margin-top: 24.6153846154vw;
  font-size: 5.1282051282vw;
  line-height: 1.4;
  letter-spacing: -0.2564102564vw;
}
@media screen and (min-width: 768px) {
  #contact #form .form h3 {
    font-size: min(20px, 1.6vw);
    line-height: 1.4;
    margin-top: 0;
    letter-spacing: max(-1px, -0.08vw);
  }
}
#contact #form .form .radio .wpcf7-radio {
  margin-top: 6.1538461538vw;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5641025641vw;
}
@media screen and (min-width: 768px) {
  #contact #form .form .radio .wpcf7-radio {
    margin-top: min(24px, 1.92vw);
    grid-template-columns: repeat(2, 1fr);
    gap: min(16px, 1.28vw);
    justify-content: space-between;
  }
}
#contact #form .form .radio .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}
#contact #form .form .radio .wpcf7-radio label {
  display: grid;
  grid-template-columns: 4.8717948718vw 1fr;
  align-items: center;
  gap: 0.8974358974vw;
  font-size: 4.1025641026vw;
  line-height: 1.6;
  letter-spacing: -0.0820512821vw;
  cursor: pointer;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #contact #form .form .radio .wpcf7-radio label {
    grid-template-columns: min(19px, 1.52vw) 1fr;
    gap: min(3.5px, 0.28vw);
    font-size: min(16px, 1.28vw);
    line-height: 1.6;
    letter-spacing: max(-0.32px, -0.0256vw);
  }
}
#contact #form .form .radio .wpcf7-radio label:before {
  content: "";
  width: 100%;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' fill='none'%3E%3Ccircle cx='10.5' cy='10' r='9.5' stroke='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
#contact #form .form .radio .wpcf7-radio label:has(input:checked):before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' fill='none'%3E%3Ccircle cx='10.5' cy='10' r='9.5' stroke='%23000'/%3E%3Ccircle cx='10.5' cy='10' r='6.5' fill='%23000'/%3E%3C/svg%3E");
}
#contact #form .form .radio .wpcf7-radio label input {
  display: none;
}
#contact #form .form form > ul {
  margin-top: 14.8717948718vw;
}
@media screen and (min-width: 768px) {
  #contact #form .form form > ul {
    margin-top: min(52px, 4.16vw);
  }
}
#contact #form .form form > ul li {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 0.2564102564vw solid #000;
  padding: 2.5641025641vw 0;
}
@media screen and (min-width: 768px) {
  #contact #form .form form > ul li {
    grid-template-columns: min(180px, 14.4vw) 1fr;
    gap: min(8px, 0.64vw);
    border-bottom-width: min(1px, 0.08vw);
    padding: 0;
  }
}
#contact #form .form form > ul li label {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 4.6153846154vw;
  line-height: 1.4;
  letter-spacing: -0.2307692308vw;
}
@media screen and (min-width: 768px) {
  #contact #form .form form > ul li label {
    font-size: min(20px, 1.6vw);
    line-height: 1.4;
    letter-spacing: max(-1px, -0.08vw);
    padding: min(10px, 0.8vw) 0;
  }
}
#contact #form .form form > ul li input,
#contact #form .form form > ul li textarea {
  margin-top: 4.1025641026vw;
  font-size: 4.1025641026vw;
  line-height: 1.6;
  letter-spacing: -0.0820512821vw;
  width: 100%;
}
@media screen and (min-width: 768px) {
  #contact #form .form form > ul li input,
  #contact #form .form form > ul li textarea {
    text-align: right;
    font-size: min(16px, 1.28vw);
    line-height: 1.75;
    letter-spacing: max(-0.32px, -0.0256vw);
    padding: min(10px, 0.8vw) 0;
    margin-top: 0;
  }
}
#contact #form .form form > ul li input::placeholder,
#contact #form .form form > ul li textarea::placeholder {
  color: #000;
  opacity: 0.2;
}
#contact #form .form form > ul li textarea {
  height: 22.8205128205vw;
}
@media screen and (min-width: 768px) {
  #contact #form .form form > ul li textarea {
    height: min(150px, 12vw);
  }
}
#contact #form .form form > ul li:last-of-type {
  grid-template-columns: 1fr;
  border: none;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #contact #form .form form > ul li:last-of-type {
    margin-top: min(48px, 3.84vw);
  }
}
#contact #form .form .btn {
  margin-top: 15.3846153846vw;
}
@media screen and (min-width: 768px) {
  #contact #form .form .btn {
    margin-top: min(60px, 4.8vw);
  }
}
#contact #form .form .btn button {
  border-bottom: 0.2564102564vw solid #000;
  display: grid;
  grid-template-columns: 1fr 7.6923076923vw;
  align-items: center;
  padding: 2.0512820513vw 2.5641025641vw;
  width: 51.5384615385vw;
  font-size: 4.1025641026vw;
  line-height: 1.6;
  letter-spacing: -0.0820512821vw;
  font-weight: 500;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  #contact #form .form .btn button {
    width: min(201px, 16.08vw);
    padding: min(8px, 0.64vw) min(10px, 0.8vw);
    border-bottom-width: min(1px, 0.08vw);
    grid-template-columns: 1fr min(30px, 2.4vw);
    font-size: min(16px, 1.28vw);
    line-height: 1.6;
    letter-spacing: max(-0.32px, -0.0256vw);
  }
}
#contact #form .form .btn button:after {
  content: "";
  width: 100%;
  aspect-ratio: 30/10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='12' fill='none'%3E%3Cpath stroke='%23000' d='M0 6h30M25 1l5 5-5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
#contact #form .form .wpcf7-not-valid-tip {
  margin-top: 2.5641025641vw;
  font-size: 4.1025641026vw;
  line-height: 1.6;
  text-align: right;
}
@media screen and (min-width: 768px) {
  #contact #form .form .wpcf7-not-valid-tip {
    margin-top: min(10px, 0.8vw);
    font-size: min(16px, 1.28vw);
    line-height: 1.6;
  }
}
#contact #thanks {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
}
@media screen and (min-width: 768px) {
  #contact #thanks {
    padding: 0 1.3888888889vw 0 16.1805555556vw;
  }
}
#contact #thanks h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #contact #thanks h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#contact #thanks h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #contact #thanks h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#contact #thanks h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#contact #thanks h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#contact #thanks h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#contact #thanks h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#contact #thanks h2.animeOn .on span {
  transform: translateY(0);
}
#contact #thanks h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#contact #thanks h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#contact #thanks h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#contact #thanks h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
#contact #thanks h2 + p {
  margin-top: 6.1538461538vw;
  font-size: 3.8461538462vw;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  #contact #thanks h2 + p {
    margin-top: min(24px, 1.92vw);
    font-size: min(16px, 1.28vw);
    line-height: 1.6;
  }
}
#contact #thanks .back {
  margin-top: 15.3846153846vw;
}
@media screen and (min-width: 768px) {
  #contact #thanks .back {
    margin-top: min(27px, 2.16vw);
  }
}
#contact #thanks .back a {
  border-bottom: 0.2564102564vw solid #000;
  display: grid;
  grid-template-columns: 1fr 7.6923076923vw;
  align-items: center;
  padding: 2.0512820513vw 2.5641025641vw;
  width: 51.5384615385vw;
  font-size: 4.1025641026vw;
  line-height: 1.6;
  letter-spacing: -0.0820512821vw;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #contact #thanks .back a {
    width: min(201px, 16.08vw);
    padding: min(8px, 0.64vw) min(10px, 0.8vw);
    border-bottom-width: min(1px, 0.08vw);
    grid-template-columns: 1fr min(30px, 2.4vw);
    font-size: min(16px, 1.28vw);
    line-height: 1.6;
    letter-spacing: max(-0.32px, -0.0256vw);
  }
}
#contact #thanks .back a:after {
  content: "";
  width: 100%;
  aspect-ratio: 30/10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='12' fill='none'%3E%3Cpath stroke='%23000' d='M0 6h30M25 1l5 5-5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}

@media screen and (min-width: 768px) {
  #detail main {
    padding-top: min(66px, 5.28vw);
  }
}
#detail #news {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #detail #news {
    padding: 0 1.3888888889vw;
    grid-template-columns: 48.6111111111vw 41.6666666667vw;
    gap: 0;
  }
}
#detail #news h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #detail #news h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#detail #news h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #detail #news h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#detail #news h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#detail #news h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#detail #news h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#detail #news h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#detail #news h2.animeOn .on span {
  transform: translateY(0);
}
#detail #news h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#detail #news h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#detail #news h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#detail #news h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #detail #news h2 {
    grid-column: 1/2;
    margin-top: 0;
  }
  #detail #news h2 > span:not(.on, .anime) {
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  #detail #news h2 > .on {
    top: min(3px, 0.24vw);
    position: absolute;
  }
}
@media screen and (min-width: 768px) {
  #detail #news h2 > span:not(.on, .anime) {
    margin-left: 14.7916666667vw;
  }
}
#detail #news .date p {
  font-family: "Noto Sans JP", sans-serif;
  opacity: 0.5;
  margin-top: 20vw;
  font-size: 3.0769230769vw;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  #detail #news .date p {
    margin-top: 0;
    font-size: min(12px, 0.96vw);
    line-height: 1.4;
  }
}
#detail #news .date h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  margin-top: 3.0769230769vw;
}
@media screen and (min-width: 768px) {
  #detail #news .date h3 {
    font-size: min(24px, 1.92vw);
    line-height: 1.4;
    margin-top: min(4px, 0.32vw);
    font-weight: 500;
    grid-column: 2;
  }
}
#detail #news .wrap {
  font-size: 3.5897435897vw;
  line-height: 1.6;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #detail #news .wrap {
    grid-column: 2;
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
  }
}
#detail #news .wrap > p:not(.thumbnail) {
  margin-top: 8.2051282051vw;
}
@media screen and (min-width: 768px) {
  #detail #news .wrap > p:not(.thumbnail) {
    margin-top: min(32px, 2.56vw);
  }
}
#detail #news .wrap > p:first-of-type {
  margin-top: 16.4102564103vw;
}
@media screen and (min-width: 768px) {
  #detail #news .wrap > p:first-of-type {
    margin-top: min(64px, 5.12vw);
  }
}
#detail #news .wrap .thumbnail img,
#detail #news .wrap figure img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  #detail #news .wrap .thumbnail img,
  #detail #news .wrap figure img {
    height: min(300px, 24vw);
    width: auto;
    max-width: 100%;
  }
}
#detail #news .wrap ul {
  margin-top: 8.2051282051vw;
}
@media screen and (min-width: 768px) {
  #detail #news .wrap ul {
    margin-top: min(32px, 2.56vw);
  }
}
#detail #news .wrap ul li {
  list-style: disc;
  margin-left: 6.1538461538vw;
}
@media screen and (min-width: 768px) {
  #detail #news .wrap ul li {
    margin-left: min(24px, 1.92vw);
  }
}
#detail #news .wrap h2, #detail #news .wrap figure {
  margin-top: 8.2051282051vw;
}
@media screen and (min-width: 768px) {
  #detail #news .wrap h2, #detail #news .wrap figure {
    margin-top: min(32px, 2.56vw);
  }
}
#detail #news .wrap blockquote {
  margin-top: 8.2051282051vw;
  background-color: #CACACA;
  padding: 2.5641025641vw;
}
@media screen and (min-width: 768px) {
  #detail #news .wrap blockquote {
    margin-top: min(32px, 2.56vw);
    padding: min(15px, 1.2vw);
  }
}
#detail #news .wrap blockquote p {
  margin-top: 0;
}
#detail #news .back {
  margin-left: auto;
  width: max-content;
  font-weight: 600;
  margin-top: 8.7179487179vw;
}
#detail #news .back a {
  font-family: "Manrope", sans-serif;
  padding: 2.8205128205vw 0 2.5641025641vw;
  display: block;
  font-size: 4.1025641026vw;
  line-height: 1;
  position: relative;
  font-weight: 500;
  min-width: 20.5128205128vw;
  width: max-content;
}
@media screen and (min-width: 768px) {
  #detail #news .back a {
    font-size: min(16px, 1.28vw);
    line-height: 1;
    padding: min(11px, 0.88vw) 0 min(12px, 0.96vw);
    width: min(140px, 11.2vw);
    min-width: auto;
  }
}
#detail #news .back a:after {
  content: "";
  width: 100%;
  height: 0.2564102564vw;
  background-color: #000;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  transition: transform 0.25s ease-in-out;
  transform-origin: center top;
}
@media screen and (min-width: 768px) {
  #detail #news .back a:after {
    height: min(1px, 0.08vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #detail #news .back a:hover:after {
    transform: scaleX(0);
  }
}
@media screen and (min-width: 768px) {
  #detail #news .back {
    grid-column: 2;
    margin-top: min(26px, 2.08vw);
  }
}

@media screen and (min-width: 768px) {
  #news main {
    padding-top: min(66px, 5.28vw);
  }
}
#news #list {
  width: 100%;
  padding: 0 5.1282051282vw 0 13.3333333333vw;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  #news #list {
    padding: 0 1.3888888889vw;
    grid-template-columns: 48.6111111111vw 41.6666666667vw;
    gap: 0;
  }
}
#news #list h2 {
  font-family: "Manrope", sans-serif;
  font-size: 4.1025641026vw;
  line-height: 1;
  font-weight: 600;
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 768px) {
  #news #list h2 {
    font-size: min(20px, 1.6vw);
    line-height: 1;
  }
}
#news #list h2 > span:not(.on, .anime) {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 6.1538461538vw;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6.1538461538vw;
  letter-spacing: -0.3076923077vw;
}
@media screen and (min-width: 768px) {
  #news #list h2 > span:not(.on, .anime) {
    margin-top: min(28px, 2.24vw);
    font-size: min(30px, 2.4vw);
    line-height: 1.2;
    letter-spacing: max(-1.5px, -0.12vw);
  }
}
#news #list h2 > span:not(.on, .anime):nth-of-type(1) .anime {
  transition-delay: 0.6s;
}
#news #list h2 > span:not(.on, .anime):nth-of-type(2) .anime {
  transition-delay: 0.9s;
}
#news #list h2 .on {
  overflow: hidden;
  display: inline-block;
  padding: 0.11em 0;
  margin: -0.11em 0;
}
#news #list h2.anime .on span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1);
}
#news #list h2.animeOn .on span {
  transform: translateY(0);
}
#news #list h2.anime.animeOn > .on:nth-of-type(1) span {
  transition-delay: 0s;
  transform: translateY(0);
}
#news #list h2.anime.animeOn > span > .on:nth-of-type(1) span {
  transition-delay: 0.3s;
  transform: translateY(0);
}
#news #list h2.anime.animeOn > span > .on:nth-of-type(2) span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
#news #list h2.anime.animeOn > span > .on:nth-of-type(3) span {
  transition-delay: 0.9s;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  #news #list h2 {
    grid-column: 1/2;
    margin-top: 0;
  }
  #news #list h2 > span:not(.on, .anime) {
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  #news #list h2 > .on {
    top: min(3px, 0.24vw);
    position: absolute;
  }
}
@media screen and (min-width: 768px) {
  #news #list h2 > span:not(.on, .anime) {
    margin-left: 14.7916666667vw;
  }
}
#news #list h2 + p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.8461538462vw;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.0769230769vw;
  margin-top: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #news #list h2 + p {
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    letter-spacing: min(0.28px, 0.0224vw);
  }
}
@media screen and (min-width: 768px) {
  #news #list h2 + p {
    margin-top: min(32px, 2.56vw);
    grid-column: 1;
    margin-left: 14.7916666667vw;
  }
}
#news #list ul {
  margin-top: 21.5384615385vw;
  display: flex;
  flex-direction: column;
  gap: 8.2051282051vw;
}
@media screen and (min-width: 768px) {
  #news #list ul {
    margin-top: 0;
    gap: min(48px, 3.84vw);
    grid-row: 2;
    grid-column: 2;
  }
}
@media screen and (min-width: 768px) {
  #news #list ul li {
    width: 41.6666666667vw;
    padding-bottom: min(48px, 3.84vw);
    border-bottom: min(1px, 0.08vw) solid #000;
  }
}
@media screen and (min-width: 768px) {
  #news #list ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}
#news #list ul li a {
  display: block;
  position: relative;
  transition: background-color 0.25s ease-in-out;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #news #list ul li a {
    padding: min(10px, 0.8vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #news #list ul li a:hover {
    background-color: #f5f5f5;
  }
  #news #list ul li a:hover figure img {
    transform: scale(1.05);
  }
  #news #list ul li a:hover > p:after {
    transform: scaleX(0);
  }
}
#news #list ul li a figure {
  display: grid;
  grid-template-columns: 18.4615384615vw 1fr;
  gap: 4.1025641026vw;
}
@media screen and (min-width: 768px) {
  #news #list ul li a figure {
    grid-template-columns: min(180px, 14.4vw) 1fr;
    gap: min(22px, 1.76vw);
  }
}
#news #list ul li a figure span {
  width: 100%;
  aspect-ratio: 72/96;
  overflow: hidden;
}
#news #list ul li a figure span img {
  transition: transform 0.25s ease-in-out;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 72/96;
}
#news #list ul li a figure figcaption .date {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.0769230769vw;
  line-height: 1.4;
  font-weight: 500;
  opacity: 0.5;
}
@media screen and (min-width: 768px) {
  #news #list ul li a figure figcaption .date {
    font-size: min(12px, 0.96vw);
    line-height: 1.4;
    position: absolute;
    bottom: min(10px, 0.8vw);
    right: min(10px, 0.8vw);
  }
}
#news #list ul li a figure figcaption h3 {
  margin-top: 1.0256410256vw;
  font-family: "Noto Serif JP", serif;
  font-size: 4.1025641026vw;
  line-height: 1.4;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #news #list ul li a figure figcaption h3 {
    margin-top: 0;
    font-size: min(24px, 1.92vw);
    line-height: 1.4;
  }
}
#news #list ul li a figure figcaption p:not(.date) {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.0769230769vw;
  line-height: 1.4;
  margin-top: 2.0512820513vw;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #news #list ul li a figure figcaption p:not(.date) {
    margin-top: min(17px, 1.36vw);
    font-size: min(14px, 1.12vw);
    line-height: 1.6;
    -webkit-line-clamp: 4;
  }
}
#news #list ul li a > p {
  padding: 1.0256410256vw 0 0.7692307692vw;
  font-family: "Manrope", sans-serif;
  font-size: 3.5897435897vw;
  line-height: 1;
  width: max-content;
  position: relative;
  margin-left: auto;
  margin-top: 3.0769230769vw;
  font-weight: 500;
  width: 20.5128205128vw;
}
@media screen and (min-width: 768px) {
  #news #list ul li a > p {
    padding: min(4px, 0.32vw) 0 min(10px, 0.8vw);
    font-size: min(16px, 1.28vw);
    line-height: 1;
    position: absolute;
    bottom: min(10px, 0.8vw);
    left: min(212px, 16.96vw);
    width: min(140px, 11.2vw);
  }
}
#news #list ul li a > p:after {
  content: "";
  width: 100%;
  height: 0.2564102564vw;
  background-color: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  transition: transform 0.25s ease-in-out;
  transform-origin: left top;
}
@media screen and (min-width: 768px) {
  #news #list ul li a > p:after {
    height: min(1px, 0.08vw);
  }
}
#news #list .back {
  margin-left: auto;
  width: max-content;
  font-weight: 600;
  margin-top: 24.6153846154vw;
}
#news #list .back a {
  font-family: "Manrope", sans-serif;
  padding: 2.8205128205vw 0 2.5641025641vw;
  display: block;
  font-size: 4.1025641026vw;
  line-height: 1;
  position: relative;
  font-weight: 500;
  min-width: 20.5128205128vw;
  width: max-content;
}
@media screen and (min-width: 768px) {
  #news #list .back a {
    font-size: min(16px, 1.28vw);
    line-height: 1;
    padding: min(11px, 0.88vw) 0 min(12px, 0.96vw);
    width: min(140px, 11.2vw);
    min-width: auto;
  }
}
#news #list .back a:after {
  content: "";
  width: 100%;
  height: 0.2564102564vw;
  background-color: #000;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  transition: transform 0.25s ease-in-out;
  transform-origin: center top;
}
@media screen and (min-width: 768px) {
  #news #list .back a:after {
    height: min(1px, 0.08vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #news #list .back a:hover:after {
    transform: scaleX(0);
  }
}
@media screen and (min-width: 768px) {
  #news #list .back {
    grid-column: 2;
    margin-top: min(200px, 16vw);
  }
}/*# sourceMappingURL=style.css.map */