@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://use.typekit.net/kri6qmn.css");
@keyframes down {
  0% {
    transform: rotate(0deg) translateY(0px);
  }
  10% {
    transform: rotate(0deg) translateY(0px);
  }
  40% {
    transform: rotate(0deg) translateY(10px);
  }
  60% {
    transform: rotate(0deg) translateY(10px);
  }
  90% {
    transform: rotate(0deg) translateY(0px);
  }
  100% {
    transform: rotate(0deg) translateY(0px);
  }
}
@keyframes line {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes fuwa1 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes fuwa2 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes fuwa3 {
  0% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes run {
  0% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(2px);
  }
  60% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes yurayura {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
body.loading {
  width: 100%;
  overflow: hidden;
}

header {
  opacity: 0;
  transition: all 0.3s ease-in 0s;
}
header.on {
  opacity: 1;
}

article {
  width: 100%;
  padding-top: 125px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
article.on .inner .train img {
  transform: translateX(-100px);
}
article::before {
  content: "";
  width: 100%;
  height: 250px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
  display: block;
}
article .gradation {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
article .gradation span {
  width: 100%;
  height: 50px;
  background-color: #FFF;
  display: block;
}
article .gradation span:nth-child(1) {
  opacity: 0.2;
}
article .gradation span:nth-child(2) {
  opacity: 0.4;
}
article .gradation span:nth-child(3) {
  opacity: 0.6;
}
article .gradation span:nth-child(4) {
  opacity: 0.8;
}
article .gradation span:nth-child(5) {
  opacity: 1;
}
article .inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 1;
}
article .inner::before {
  content: "";
  width: 100%;
  height: 8px;
  background-color: #BFD0DD;
  display: block;
  order: 2;
}
article .inner::after {
  content: "";
  width: 100%;
  height: 26px;
  background-color: #B6C0CA;
  display: block;
  order: 3;
}
article .inner .train {
  width: 1138px;
  position: relative;
  animation: run 0.4s linear cubic-bezier(0.68, -0.55, 0.265, 1.55);
  order: 1;
}
article .inner .train img {
  width: 100%;
  position: relative;
  transition: all 1s ease-in;
  transform: translateX(-1138px);
}

#wrapper {
  width: 100%;
  padding: 96px 0 0 0;
  background-color: #FFF;
  position: relative;
  z-index: 5;
  overflow: hidden;
}

section {
  width: 100%;
  overflow: hidden;
}
section .ph {
  position: relative;
}
section .ph::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #D44B6B;
  clip-path: inset(0 0 0 0);
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  transition: clip-path 0.45s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
section .ph.on::before {
  clip-path: inset(0 0 0 100%);
}
section .inner {
  width: 100%;
}
section .inner .title {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  transition: all 0.3s ease-in 0s;
}
section .inner .title:not(:last-child) {
  margin-bottom: 40px;
}
section .inner .title.on > div h3 {
  color: #000;
  clip-path: inset(0 0 0 0);
}
section .inner .title.on > div p {
  clip-path: inset(0 0 0 0);
}
section .inner .title.on > div p span {
  color: #000;
}
section .inner .title.on dl {
  clip-path: inset(0 0 0 0);
}
section .inner .title.on dl dt {
  color: #000;
}
section .inner .title.on dl dd:nth-child(2) {
  color: #000;
}
section .inner .title.on dl dd:nth-child(3) a span {
  color: 0;
}
section .inner .title > div h3 {
  color: #D44B6B;
  font-family: "din-2014", sans-serif;
  font-size: 9.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  margin-bottom: 8px;
  clip-path: inset(0 100% 0 0);
  transition: all 0.3s ease-in;
}
section .inner .title > div p {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  clip-path: inset(0 100% 0 0);
  transition: all 0.3s ease-in 0.25s;
  gap: 0 8px;
}
section .inner .title > div p::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #D44B6B;
  border-radius: 3px;
  display: block;
}
section .inner .title > div p span {
  color: #D44B6B;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  transition: all 0.3s ease-in 0s;
}
section .inner .title dl {
  text-align: left;
  width: 526px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px 0;
  clip-path: inset(0 100% 0 0);
  transition: all 0.3s ease-in 0.5s;
}
section .inner .title dl dt {
  color: #D44B6B;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  transition: all 0.3s ease-in 0s;
}
section .inner .title dl dd:nth-child(2) {
  color: #D44B6B;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  transition: all 0.3s ease-in;
}
section .inner .title dl dd:nth-child(3) {
  margin-left: auto;
  clip-path: inset(0 100% 0 0);
  transition: all 0.3s ease-in 0.2s;
}
section .inner .title dl dd:nth-child(3) a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0 16px;
}
section .inner .title dl dd:nth-child(3) a:hover span {
  color: #D44B6B;
}
section .inner .title dl dd:nth-child(3) a span {
  color: #D44B6B;
  font-family: "din-2014", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  transition: all 0.3s ease-in 0s;
}
section .inner .title dl dd:nth-child(3) a::after {
  content: "";
  width: 56px;
  height: 36px;
  background-image: url(../../common/images/btn1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
section#hero {
  width: 100%;
  padding: 80px 0 0 0;
  margin: 0 auto;
  position: relative;
}
section#hero.view::before {
  content: none;
}
section#hero.view .inner .catch {
  transition: all 0s ease-in 0s;
  transform: translateX(calc(-33.54vw + 128px));
}
section#hero.view .inner .catch .inner .text h2 span {
  clip-path: inset(0 0 0 0);
}
section#hero.view .inner .catch .inner .text h2 span::before {
  clip-path: inset(0 0 0 0);
}
section#hero.view .inner .catch .inner .text h3::before {
  transition: all 0.275s ease-in 0.5s;
}
section#hero.white::before {
  clip-path: inset(0 0 0 100%);
}
section#hero.white .inner .catch .inner .text h2 span {
  clip-path: inset(0 0 0 0);
}
section#hero.white .inner .catch .inner .text h2 span::before {
  clip-path: inset(0 0 0 0);
}
section#hero.white .inner .catch .inner .text h3 {
  clip-path: inset(0 0 0 0);
}
section#hero.white .inner .catch .inner .text h3::before {
  clip-path: inset(0 0 0 0);
}
section#hero::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #D44B6B;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  clip-path: inset(0 0 0 0);
  transition: all 2.5s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
}
section#hero .inner:nth-child(1) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0 3.125%;
}
section#hero .inner:nth-child(2) {
  width: calc(100% - 256px);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
section#hero .inner .catch {
  width: 33.54%;
  padding-bottom: 80px;
  transition: all 0.5s ease-in 0s;
}
section#hero .inner .catch.on {
  transform: translateX(calc(-33.54vw + 128px));
}
section#hero .inner .catch .inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
section#hero .inner .catch .inner .text {
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}
section#hero .inner .catch .inner .text.on h2 span {
  clip-path: inset(0 0 0 0);
}
section#hero .inner .catch .inner .text.on h3 span {
  clip-path: inset(0 0 0 0);
}
section#hero .inner .catch .inner .text h2 {
  width: 100%;
  position: relative;
}
section#hero .inner .catch .inner .text h2 span {
  clip-path: inset(0 100% 0 0);
  transition: all 0.2s ease-in 0s;
}
section#hero .inner .catch .inner .text h2 span::before {
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  transition: all 0.275s ease-in 0s;
  clip-path: inset(0 100% 0 0);
}
section#hero .inner .catch .inner .text h2 span:nth-child(1) {
  width: 100%;
  height: 22.324224vw;
  background-image: url(../images/catch1_white.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  margin-bottom: 33px;
  position: relative;
}
section#hero .inner .catch .inner .text h2 span:nth-child(1)::before {
  background-image: url(../images/catch1.svg);
}
section#hero .inner .catch .inner .text h2 span:nth-child(2) {
  width: 100%;
  height: 100%;
  background-image: url(../images/catch2_white.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  transition-delay: 0.3s;
}
section#hero .inner .catch .inner .text h2 span:nth-child(2)::before {
  background-image: url(../images/catch2.svg);
}
section#hero .inner .catch .inner .text h2 span:nth-child(3) {
  width: 100%;
  height: 100%;
  background-image: url(../images/catch3_white.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  transition-delay: 0.6s;
}
section#hero .inner .catch .inner .text h2 span:nth-child(3)::before {
  background-image: url(../images/catch3.svg);
}
section#hero .inner .catch .inner .text h3 {
  width: 100%;
  position: relative;
}
section#hero .inner .catch .inner .text h3::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../images/catch_sub.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  transition: all 0.275s ease-in 0s;
  clip-path: inset(0 100% 0 0);
}
section#hero .inner .catch .inner .text h3 span {
  width: 100%;
  height: 1.81116vw;
  background-image: url(../images/catch_sub_white.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  transition: all 0.2s ease-in 1s;
  clip-path: inset(0 100% 0 0);
}
section#hero .inner .illust {
  width: 47.2%;
  height: 50.032vw;
  opacity: 0;
  position: fixed;
  top: calc(50vh - 25.016vw - 80px);
  left: calc(52.8% - 104px);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  transition: all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
}
section#hero .inner .illust.show {
  top: calc(50vh - 25.016vw);
  opacity: 1;
}
section#hero .inner .illust.show.on .cloud {
  opacity: 1;
}
section#hero .inner .illust.show.on .layer {
  top: 0px;
}
section#hero .inner .illust.show.on .layer.l1 {
  clip-path: inset(0 0 0 0);
}
section#hero .inner .illust.show.on .layer.l2 {
  clip-path: circle(50% at 50% 50%);
}
section#hero .inner .illust.show.on .layer.l3 {
  clip-path: circle(50% at 50% 50%);
  animation: yurayura 5s linear infinite;
}
section#hero .inner .illust.show .wrap .base > div {
  bottom: 0px;
  opacity: 1;
}
section#hero .inner .illust.show .wrap .base > div.base1 {
  clip-path: ellipse(50% 50% at 50% 50%);
}
section#hero .inner .illust .cloud {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease-in 0s;
}
section#hero .inner .illust .cloud.cld1 {
  width: 110px;
  top: 200px;
  left: -24px;
  z-index: 0;
  transition-delay: 1s;
  animation: fuwa1 8s linear infinite;
}
section#hero .inner .illust .cloud.cld2 {
  width: 88px;
  top: 104px;
  left: 120px;
  z-index: 0;
  transition-delay: 1.5s;
  animation: fuwa3 9s linear infinite;
}
section#hero .inner .illust .cloud.cld3 {
  width: 135px;
  top: 80px;
  left: calc(100% - 80px);
  z-index: 5;
  transition-delay: 2s;
  animation: fuwa2 7s linear infinite;
}
section#hero .inner .illust .wrap {
  width: 100%;
  position: relative;
}
section#hero .inner .illust .wrap .layer {
  width: 100%;
  transition: all 0.75s ease-in;
  position: absolute;
  top: -40px;
}
section#hero .inner .illust .wrap .layer.l1 {
  width: 100%;
  left: 0px;
  z-index: 5;
  transition-delay: 1s;
}
section#hero .inner .illust .wrap .layer.l2 {
  width: 100%;
  position: absolute;
  left: 0px;
  z-index: 6;
  transition-delay: 0.75s;
}
section#hero .inner .illust .wrap .layer.l3 {
  width: 100%;
  position: absolute;
  left: 0px;
  z-index: 7;
  transition-delay: 0.5s;
}
section#hero .inner .illust .wrap .base {
  width: 100%;
  pointer-events: none;
}
section#hero .inner .illust .wrap .base > div {
  width: 100%;
  position: absolute;
  bottom: 60px;
  left: 0px;
  opacity: 0;
}
section#hero .inner .illust .wrap .base > div.base1 {
  transition: all 0.6s ease-in 0s;
  clip-path: circle(50% at 50% 50%);
  position: relative;
  top: auto;
  left: auto;
  opacity: 1;
}
section#hero .inner .illust .wrap .base > div.base2 {
  z-index: 1;
  transition: all 0.65s ease-in 0.5s;
}
section#hero .inner .illust .wrap .base > div.base3 {
  z-index: 2;
  transition: all 0.5s ease-in 1s;
}
section#hero .inner .illust .wrap .base > div.base4 {
  z-index: 3;
  transition: all 0.55s ease-in 0.9s;
}
section#hero .inner .illust .wrap .base > div.base5 {
  z-index: 4;
  transition: all 0.6s ease-in 0s;
  bottom: 0px;
}
section#hero .inner .illust .wrap .base > div.base6 {
  z-index: 5;
  transition: all 0.675s ease-out 1.5s;
  clip-path: circle(50% at 50% 50%);
}
section#hero .inner .illust .wrap .base > div.base7 {
  z-index: 6;
  transition: all 0.5s ease-out 1.1s;
}
section#hero .inner .illust .wrap .base > div.base8 {
  z-index: 7;
  transition: all 0.6s ease-out 1.3s;
}
section#hero .inner .illust .wrap .base > div.base9 {
  z-index: 8;
  transition: all 0.6s ease-in 0s;
  bottom: 0px;
}
section#hero .inner .illust .wrap .base > div.base10 {
  z-index: 9;
  transition: all 0.6s ease-out 1.3s;
}
section#hero .inner .illust .wrap .base > div.base11 {
  z-index: 10;
  transition: all 0.67s ease-out 1.25s;
}
section#hero .inner .illust .wrap .base > div.base12 {
  z-index: 10;
  transition: all 0.6s ease-in 0s;
  bottom: 0px;
}
section#hero .inner .illust .wrap .base > div.base13 {
  z-index: 12;
  transition: all 0.6s ease-out 1.3s;
}
section#hero .inner .illust .wrap .base > div.base14 {
  z-index: 13;
  transition: all 0.65s ease-out 1.5s;
}
section#hero .inner .illust .wrap .base > div.base15 {
  z-index: 14;
  transition: all 0.65s ease-out 1.25s;
}
section#hero .inner .illust .wrap .base > div.base16 {
  z-index: 15;
  transition: all 0.575s ease-out 2s;
}
section#hero .inner .illust .wrap .base > div.base17 {
  z-index: 16;
  transition: all 0.55s ease-out 2s;
}
section#hero .inner .illust .wrap .base > div.base18 {
  z-index: 17;
  transition: all 0.575s ease-out 1.75s;
  clip-path: circle(50% at 50% 50%);
}
section#hero .inner .illust .wrap .base > div.base19 {
  z-index: 18;
  transition: all 0.75s ease-out 1.8s;
}
section#hero .inner .illust .wrap .base > div.base20 {
  z-index: 19;
  transition: all 0.575s ease-out 1.9s;
  clip-path: circle(50% at 50% 50%);
}
section#hero .inner .illust .wrap .base > div.base21 {
  z-index: 20;
  transition: all 0.55s ease-out 2s;
  animation: yurayura 5s linear infinite;
}
section#hero .inner .message .text {
  text-align: left;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  z-index: 3;
}
section#hero .inner .message .text h4 {
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-stat;
}
section#hero .inner .message .text h4 > span {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.875;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  position: relative;
}
section#hero .inner .message .text h4 > span > span {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 0px;
  right: 0px;
}
section#hero .inner .message .text p {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  position: relative;
}
section#hero .inner .message .text p:not(:last-child) {
  margin-bottom: 16px;
}
section#hero .inner .message .text p:nth-last-child(2) {
  margin-bottom: 64px;
}
section#hero .inner .message .text p > span {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 0px;
  right: 0px;
}
section#hero .inner .message .text .link {
  opacity: 0;
  transition: all 0.3s ease-in 0s;
}
section#hero .inner .message .text .link.on {
  opacity: 1;
}
section#hero .inner .message .text .link:hover a span {
  color: #D44B6B;
}
section#hero .inner .message .text .link a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 16px;
}
section#hero .inner .message .text .link a span {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  text-decoration: underline;
  transition: all 0.3s ease-in 0s;
}
section#hero .inner .message .text .link a::after {
  content: "";
  width: 56px;
  height: 36px;
  background-image: url(../../common/images/btn1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
section#interview {
  width: calc(100% - 256px);
  margin: 0 auto 96px auto;
  position: relative;
  overflow: visible;
}
section#interview .deco {
  position: absolute;
  bottom: -116px;
  z-index: 5;
  transition: all 0.3s cubic-bezier(1, 0, 0, 1) 0s;
  opacity: 0;
}
section#interview .deco.on {
  bottom: -96px;
  opacity: 1;
}
section#interview .deco.on.deco4 {
  bottom: -76px;
}
section#interview .deco.deco1 {
  width: 72px;
  left: calc(50% - 591px - 72px);
}
section#interview .deco.deco2 {
  width: 52px;
  left: calc(50% - 52px - 20px);
  transition-delay: 0.5s;
}
section#interview .deco.deco3 {
  width: 63px;
  left: calc(50% - 31px);
  transition-delay: 0.25s;
}
section#interview .deco.deco4 {
  width: 75px;
  left: calc(50% + 591px);
  transition-delay: 0.3s;
}
section#interview .inner .interview {
  width: 100%;
  padding-top: 40px;
  border-top: solid 1px #4E4E4E;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 0 71px;
  position: relative;
}
section#interview .inner .interview::before {
  content: "";
  width: 101px;
  height: 50px;
  background-image: url(../images/illust_cloud1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  top: 148px;
  right: -88px;
  z-index: 3;
  animation: fuwa1 7s linear infinite;
}
section#interview .inner .interview::after {
  content: "";
  width: 101px;
  height: 50px;
  background-image: url(../images/illust_cloud1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  top: 234px;
  left: -72px;
  z-index: 3;
  animation: fuwa1 8s linear infinite;
}
section#interview .inner .interview .set {
  width: calc((100% - 71px) / 2);
}
section#interview .inner .interview .set .mytt {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
section#interview .inner .interview .set .mytt h4 {
  color: #000;
  font-family: "din-2014", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  text-align: left;
}
section#interview .inner .interview .set .mytt h4 span.col1 {
  color: #405E91;
}
section#interview .inner .interview .set .mytt h4 span.col2 {
  color: #D44B6B;
}
section#interview .inner .interview .set .mytt .button {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 8px;
}
section#interview .inner .interview .set .mytt .button .arrow {
  width: 55px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease-in 0s;
  cursor: pointer;
}
section#interview .inner .interview .set .mytt .button .arrow.next {
  background-image: url(../../common/images/btn_arrow_next1.png);
}
section#interview .inner .interview .set .mytt .button .arrow.next:hover {
  background-image: url(../../common/images/btn_arrow_next2.png);
}
section#interview .inner .interview .set .mytt .button .arrow.prev {
  background-image: url(../../common/images/btn_arrow_prev1.png);
}
section#interview .inner .interview .set .mytt .button .arrow.prev:hover {
  background-image: url(../../common/images/btn_arrow_prev2.png);
}
section#interview .inner .interview .set .mytt .button .count {
  width: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
section#interview .inner .interview .set .mytt .button .count span {
  color: #000;
  font-family: "din-2014", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
section#interview .inner .interview .set .mytt .button .count span::before {
  content: "0";
  display: inline;
}
section#interview .inner .interview .set .mytt .button .count span.swiper-pagination-total {
  opacity: 0.5;
}
section#interview .inner .interview .set .mytt .button .pager {
  opacity: 0;
  position: absolute;
}
section#interview .inner .interview .set .slider {
  width: 100%;
  margin-top: auto;
  overflow: hidden;
}
section#interview .inner .interview .set .slider .swiper-slide {
  width: 100%;
  transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
}
section#interview .inner .interview .set .slider .swiper-slide a {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  display: block;
}
section#interview .inner .interview .set .slider .swiper-slide a:hover .text dl dd:nth-child(2) span {
  background-image: linear-gradient(90deg, #FFF, #FFF);
  background-size: 100% 1px;
}
section#interview .inner .interview .set .slider .swiper-slide a:hover .ph img {
  transform: scale(1.05);
}
section#interview .inner .interview .set .slider .swiper-slide a .text {
  text-align: left;
  width: calc(100% - 48px);
  height: calc(100% - 24px);
  position: absolute;
  top: 0px;
  left: 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 24px 0;
}
section#interview .inner .interview .set .slider .swiper-slide a .text dl dt {
  color: #FFF;
  font-family: "din-2014", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  margin-bottom: 16px;
}
section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(2) {
  margin-bottom: 24px;
}
section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(2) span {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.875;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  text-decoration: none;
  background-image: linear-gradient(90deg, #1E1E1E, #1E1E1E);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 1px;
  padding-bottom: 4px;
  transition: background-size 0.6s;
}
section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(3) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 12px;
}
section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(3) span:nth-child(1) {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(3) span:nth-child(2) {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(3) span:nth-child(3) {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  width: 118px;
  height: 26px;
  border: solid 1px #FFF;
  border-radius: 24px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
section#interview .inner .interview .set .slider .swiper-slide a .ph {
  width: 100%;
}
section#interview .inner .interview .set .slider .swiper-slide a .ph img {
  width: 100%;
  transition: all 0.25s ease-in 0s;
}
section#crosstalk {
  width: 100%;
  background-color: #ECE7E0;
  padding: 96px 0;
  margin: 0 auto 96px auto;
  overflow: hidden;
  position: relative;
}
section#crosstalk .deco.deco5 {
  width: 268px;
  position: absolute;
  bottom: 0px;
  left: calc(50% + 591px - 168px);
  z-index: 3;
}
section#crosstalk .bg1 {
  content: "";
  width: 1716px;
  height: 1142px;
  background-image: url(../images/bg_crosstalk.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  top: -800px;
  left: calc(50% - 540px);
  z-index: 0;
}
section#crosstalk .bg2 {
  content: "";
  width: 1716px;
  height: 1142px;
  background-image: url(../images/bg_crosstalk.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  top: -40px;
  left: calc(50% - 858px);
  z-index: 0;
}
section#crosstalk .title {
  position: relative;
  z-index: 1;
}
section#crosstalk .button {
  width: 100%;
  margin: 0 auto;
  padding: 32px 0;
  border-top: solid 1px rgba(115, 103, 90, 0.2);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0 8px;
  position: relative;
  z-index: 1;
}
section#crosstalk .button .arrow {
  width: 55px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease-in 0s;
  cursor: pointer;
}
section#crosstalk .button .arrow.next {
  background-image: url(../../common/images/btn_arrow_next1.png);
}
section#crosstalk .button .arrow.next:hover {
  background-image: url(../../common/images/btn_arrow_next2.png);
}
section#crosstalk .button .arrow.prev {
  background-image: url(../../common/images/btn_arrow_prev1.png);
}
section#crosstalk .button .arrow.prev:hover {
  background-image: url(../../common/images/btn_arrow_prev2.png);
}
section#crosstalk .button .count {
  width: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
section#crosstalk .button .count span {
  color: #000;
  font-family: "din-2014", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
section#crosstalk .button .count span::before {
  content: "0";
  display: inline;
}
section#crosstalk .button .count span.swiper-pagination-total {
  opacity: 0.5;
}
section#crosstalk .button .mypager {
  opacity: 0;
  position: absolute;
}
section#crosstalk .inner {
  width: calc(100% - 256px);
  margin: 0 auto;
}
section#crosstalk .inner .ct-slider {
  width: 100%;
}
section#crosstalk .inner .ct-slider .swiper-slide {
  opacity: 0.3;
  transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition: all 0.3s ease-in 0s;
}
section#crosstalk .inner .ct-slider .swiper-slide.swiper-slide-active {
  opacity: 1;
}
section#crosstalk .inner .ct-slider .swiper-slide a {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  display: block;
}
section#crosstalk .inner .ct-slider .swiper-slide a:hover .ph img {
  transform: scale(1.05);
}
section#crosstalk .inner .ct-slider .swiper-slide a .text {
  text-align: left;
  width: calc(100% - 48px);
  height: calc(100% - 24px);
  position: absolute;
  top: 0px;
  left: 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 24px 0;
}
section#crosstalk .inner .ct-slider .swiper-slide a .text dl dt {
  color: #FFF;
  font-family: "din-2014", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  margin-bottom: 16px;
}
section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(2) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px 0;
}
section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(2) span {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  background-color: #FFF;
  padding: 12px;
  border-radius: 4px;
}
section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(2) span span {
  background-color: transparent;
  padding: 0;
  border-radius: 0px;
}
section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 24px;
}
section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) .person {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 12px;
}
section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) .person span:nth-child(1) {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) .person span:nth-child(2) {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) .person span:nth-child(3) {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  width: 118px;
  height: 26px;
  border: solid 1px #FFF;
  border-radius: 24px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) .cross {
  width: 17px;
  height: 17px;
  background-image: url(../images/text_cross.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}
section#crosstalk .inner .ct-slider .swiper-slide a .ph {
  width: 100%;
  transition: clip-path 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
section#crosstalk .inner .ct-slider .swiper-slide a .ph img {
  width: 100%;
  transition: all 0.25s ease-in 0s;
}
section#work {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
section#work.on .inner .business h4 {
  opacity: 1;
}
section#work.on .inner .business .inbusiness .biz {
  opacity: 1;
}
section#work .inner {
  width: calc(100% - 256px);
  margin: 0 auto;
}
section#work .inner .business {
  width: 100%;
  padding: 40px 0 0 0;
  border-top: solid 1px rgba(115, 103, 90, 0.2);
}
section#work .inner .business h4 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  text-align: left;
  margin-bottom: 32px;
  opacity: 0;
  transition: opacity 0.3s ease-in 0s;
}
section#work .inner .business .inbusiness {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 50px;
}
section#work .inner .business .inbusiness .biz {
  width: calc((100% - 100px) / 3);
  opacity: 0;
  transition: opacity 0.3s ease-in 0s;
}
section#work .inner .business .inbusiness .biz:nth-child(1) {
  transition-delay: 0.5s;
}
section#work .inner .business .inbusiness .biz:nth-child(2) {
  transition-delay: 0.6s;
}
section#work .inner .business .inbusiness .biz:nth-child(2) a::before {
  content: "02";
}
section#work .inner .business .inbusiness .biz:nth-child(3) {
  transition-delay: 0.7s;
}
section#work .inner .business .inbusiness .biz:nth-child(3) a::before {
  content: "03";
}
section#work .inner .business .inbusiness .biz:nth-child(4) {
  transition-delay: 0.8s;
}
section#work .inner .business .inbusiness .biz:nth-child(4) a::before {
  content: "04";
}
section#work .inner .business .inbusiness .biz:nth-child(5) {
  transition-delay: 0.9s;
}
section#work .inner .business .inbusiness .biz:nth-child(5) a::before {
  content: "05";
}
section#work .inner .business .inbusiness .biz a {
  width: 100%;
  height: 100%;
  background-color: #F9F7F4;
  padding: 64px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  border-radius: 24px;
  position: relative;
  transition: background-color 0.2s linear 0s;
}
section#work .inner .business .inbusiness .biz a::before {
  content: "01";
  color: #D44B6B;
  font-family: "din-2014", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  display: inline-block;
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  transition: all 0.3s ease-in 0s;
}
section#work .inner .business .inbusiness .biz a::after {
  content: "";
  width: 14px;
  height: 8px;
  background-image: url(../images/arrow_work1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  transition: all 0.3s ease-in 0s;
}
section#work .inner .business .inbusiness .biz a:hover {
  background-color: #D44B6B;
}
section#work .inner .business .inbusiness .biz a:hover::before {
  color: #FFF;
}
section#work .inner .business .inbusiness .biz a:hover::after {
  background-image: url(../images/arrow_work2.png);
}
section#work .inner .business .inbusiness .biz a:hover dl dt {
  color: #FFF;
}
section#work .inner .business .inbusiness .biz a:hover dl dd {
  color: #FFF;
}
section#work .inner .business .inbusiness .biz a:hover p {
  color: #FFF;
}
section#work .inner .business .inbusiness .biz a dl {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 56px;
}
section#work .inner .business .inbusiness .biz a dl dt {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  margin-bottom: 16px;
  transition: all 0.3s ease-in 0s;
}
section#work .inner .business .inbusiness .biz a dl dd {
  color: #000;
  font-family: "din-2014", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  opacity: 0.5;
  transition: all 0.3s ease-in 0s;
}
section#work .inner .business .inbusiness .biz a p {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.875;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  text-align: left;
  transition: all 0.3s ease-in 0s;
}
section#info {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
section#info::before {
  content: "";
  width: 120vw;
  height: 61.2vw;
  background-image: url(../images/bg_info.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  top: 320px;
  left: calc(50% - 60vw);
  z-index: -1;
}
section#info .illustcombo {
  width: 100%;
  margin-bottom: 72px;
}
section#info .illustcombo .swiper-wrapper {
  width: 100%;
  transition-timing-function: linear;
}
section#info .inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
section#info .inner .title {
  width: calc(100% - 256px);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
section#info .inner .title > div h3 {
  color: #FFF;
}
section#info .inner .title > div p span {
  color: #FFF;
}
section#info .inner .contents {
  width: calc(100% - 256px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 114px;
}
section#info .inner .contents .lead dl {
  text-align: left;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 64px 0;
}
section#info .inner .contents .lead dl dd:nth-child(1) {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.875;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
section#info .inner .contents .lead dl dd:nth-child(2) a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0 16px;
}
section#info .inner .contents .lead dl dd:nth-child(2) a:hover span {
  color: #D44B6B;
}
section#info .inner .contents .lead dl dd:nth-child(2) a span {
  color: #FFF;
  font-family: "din-2014", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  transition: all 0.3s ease-in 0s;
}
section#info .inner .contents .lead dl dd:nth-child(2) a::after {
  content: "";
  width: 56px;
  height: 36px;
  background-image: url(../../common/images/btn1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  transition: all 0.3s ease-in 0s;
}
section#info .inner .contents .link {
  text-align: left;
  width: 49.8%;
  position: relative;
  transform: translateY(-40px);
}
section#info .inner .contents .link.on dl {
  clip-path: inset(0 0 0 0);
}
section#info .inner .contents .link .deco.deco6 {
  width: 119px;
  position: absolute;
  top: -240px;
  left: calc(100% - 119px);
  z-index: 3;
}
section#info .inner .contents .link dl {
  width: 100%;
  clip-path: inset(0 100% 0 0);
  transition: all 0.3s ease-in 0s;
}
section#info .inner .contents .link dl dt {
  color: #FFF;
  font-family: "din-2014", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  margin-bottom: 32px;
}
section#info .inner .contents .link dl dd ul {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px 0;
}
section#info .inner .contents .link dl dd ul li {
  width: 100%;
}
section#info .inner .contents .link dl dd ul li a {
  width: 100%;
  height: 64px;
  background-color: #FFF;
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  transition: all 0.3s ease-in 0s;
}
section#info .inner .contents .link dl dd ul li a:hover {
  background-color: #D44B6B;
  border-radius: 40px;
}
section#info .inner .contents .link dl dd ul li a:hover::after {
  background-image: url(../images/arrow_work2.png);
}
section#info .inner .contents .link dl dd ul li a:hover span {
  color: #FFF;
}
section#info .inner .contents .link dl dd ul li a::after {
  content: "";
  width: 14px;
  height: 8px;
  background-image: url(../images/arrow_work1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  top: calc(50% - 4px);
  right: 24px;
  z-index: 1;
}
section#info .inner .contents .link dl dd ul li a span {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  position: relative;
  transform: translateX(24px);
  transition: all 0.3s ease-in 0s;
}

/* --------------------------------------- Media Queries Smartphone --------------------------------------- */
@media screen and (max-width: 768px) {
  article {
    background-color: transparent;
  }
  article.on .inner .train img {
    transform: translateX(calc(-100% - 32px));
  }
  article::before {
    height: 4px;
  }
  article::after {
    height: 13px;
  }
  article .inner .train {
    width: 200%;
    position: relative;
    left: 100%;
    animation: run 10s linear infinite;
    order: 1;
  }

  #wrapper {
    width: 100%;
    padding: 96px 0 0 0;
    background-color: #FFF;
    position: relative;
    z-index: 1;
  }

  section {
    width: 100%;
  }
  section .inner {
    width: calc(100% - 32px);
    margin: 0 auto;
  }
  section .inner .title {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  section .inner .title:not(:last-child) {
    margin-bottom: 40px;
  }
  section .inner .title > div {
    margin-bottom: 40px;
  }
  section .inner .title > div h3 {
    color: #000;
    font-family: "din-2014", sans-serif;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    margin-bottom: 8px;
  }
  section .inner .title > div p span {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section .inner .title dl {
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px 0;
  }
  section .inner .title dl dt {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section .inner .title dl dd:nth-child(2) {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.875;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section .inner .title dl dd:nth-child(3) {
    margin-left: 0;
  }
  section .inner .title dl dd:nth-child(3) a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0 8px;
  }
  section .inner .title dl dd:nth-child(3) a:hover span {
    color: #D44B6B;
  }
  section .inner .title dl dd:nth-child(3) a span {
    color: #000;
    font-family: "din-2014", sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    font-feature-settings: "palt";
  }
  section .inner .title dl dd:nth-child(3) a::after {
    width: 37px;
    height: 24px;
  }
  section#hero {
    width: 100%;
    padding: 80px 0 0 0;
    margin: 0 auto;
    position: relative;
  }
  section#hero.white::before {
    clip-path: inset(0 0 0 100%);
  }
  section#hero.white .inner .catch .inner .text h2 span::before {
    clip-path: inset(0 0 0 0);
  }
  section#hero.white .inner .catch .inner .text h3::before {
    clip-path: inset(0 0 0 0);
  }
  section#hero::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #D44B6B;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    clip-path: inset(0 0 0 0);
    transition: all 2.5s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
  }
  section#hero .inner:nth-child(1) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 3.125%;
  }
  section#hero .inner:nth-child(2) {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    z-index: 3;
  }
  section#hero .inner .catch {
    width: calc(100% - 32px);
    padding-bottom: 80px;
    transition: all 0.5s ease-in 0s;
  }
  section#hero .inner .catch.on {
    transform: none;
  }
  section#hero .inner .catch .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  section#hero .inner .catch .inner .text {
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
  section#hero .inner .catch .inner .text.on h2 span {
    clip-path: inset(0 0 0 0);
  }
  section#hero .inner .catch .inner .text.on h3 span {
    clip-path: inset(0 0 0 0);
  }
  section#hero .inner .catch .inner .text h2 {
    width: 100%;
    margin-bottom: 16px;
    position: relative;
  }
  section#hero .inner .catch .inner .text h2 span {
    clip-path: inset(0 100% 0 0);
    transition: all 0.2s ease-in 0s;
  }
  section#hero .inner .catch .inner .text h2 span::before {
    content: "";
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    transition: all 0.275s ease-in 0s;
    clip-path: inset(0 100% 0 0);
  }
  section#hero .inner .catch .inner .text h2 span:nth-child(1) {
    width: 100%;
    height: calc((100vw - 64px) * 0.6656);
    background-image: url(../images/catch1_white.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    margin-bottom: 0px;
    position: relative;
  }
  section#hero .inner .catch .inner .text h2 span:nth-child(1)::before {
    background-image: url(../images/catch1.svg);
  }
  section#hero .inner .catch .inner .text h2 span:nth-child(2) {
    width: 100%;
    height: 100%;
    background-image: url(../images/catch2_white.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    transition-delay: 0.3s;
  }
  section#hero .inner .catch .inner .text h2 span:nth-child(2)::before {
    background-image: url(../images/catch2.svg);
  }
  section#hero .inner .catch .inner .text h2 span:nth-child(3) {
    width: 100%;
    height: 100%;
    background-image: url(../images/catch3_white.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    transition-delay: 0.6s;
  }
  section#hero .inner .catch .inner .text h2 span:nth-child(3)::before {
    background-image: url(../images/catch3.svg);
  }
  section#hero .inner .catch .inner .text h3 {
    width: 100%;
    position: relative;
  }
  section#hero .inner .catch .inner .text h3::before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../images/catch_sub.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    transition: all 0.275s ease-in 0s;
    clip-path: inset(0 100% 0 0);
  }
  section#hero .inner .catch .inner .text h3 span {
    width: 100%;
    height: calc((100vw - 64px) * 0.054);
    background-image: url(../images/catch_sub_white.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    transition: all 0.2s ease-in 1s;
    clip-path: inset(0 100% 0 0);
  }
  section#hero .inner .illust {
    width: calc(100% - 64px);
    height: calc((100vw - 64px) * 1.06);
    opacity: 0;
    position: fixed;
    top: calc(50vh - (100vw - 64px) * 1.06 / 2);
    left: 32px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
  }
  section#hero .inner .illust.show {
    top: calc(50vh - (100vw - 64px) * 1.06 / 2 + 160px);
    opacity: 1;
  }
  section#hero .inner .illust.show.on.fix {
    top: calc(50vh - (100vw - 64px) * 1.06 / 2);
  }
  section#hero .inner .illust.show.on .cloud.on img {
    opacity: 0.2;
  }
  section#hero .inner .illust.show.on .layer {
    top: 0px;
  }
  section#hero .inner .illust.show.on .layer.l1 {
    clip-path: inset(0 0 0 0);
  }
  section#hero .inner .illust.show.on .layer.l2 {
    clip-path: circle(50% at 50% 50%);
  }
  section#hero .inner .illust.show.on .layer.l3 {
    clip-path: circle(50% at 50% 50%);
    animation: yurayura 5s linear infinite;
  }
  section#hero .inner .illust.show .wrap .base > div {
    bottom: 0px;
    opacity: 1;
  }
  section#hero .inner .illust.show .wrap .base > div.base1 {
    clip-path: ellipse(50% 50% at 50% 50%);
  }
  section#hero .inner .illust .cloud {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease-in 0s;
  }
  section#hero .inner .illust .cloud.cld1 {
    width: 50px;
    top: 40px;
    left: -8px;
    z-index: 0;
    transition-delay: 1s;
  }
  section#hero .inner .illust .cloud.cld2 {
    width: 40px;
    top: 0px;
    left: calc(50% - 80px);
    z-index: 0;
    transition-delay: 1.5s;
    animation: fuwa2 9s linear infinite;
  }
  section#hero .inner .illust .cloud.cld3 {
    width: 60px;
    top: 36px;
    left: calc(100% - 60px);
    z-index: 0;
    transition-delay: 2s;
  }
  section#hero .inner .illust .cloud img {
    transition: opacity 0.3s ease-in 0s;
  }
  section#hero .inner .illust .wrap {
    width: 100%;
    position: relative;
    transition: opacity 0.5s ease-in;
  }
  section#hero .inner .illust .wrap.on {
    opacity: 0.2;
  }
  section#hero .inner .illust .wrap .layer {
    width: 100%;
    transition: all 0.75s ease-in;
    position: absolute;
    top: -40px;
  }
  section#hero .inner .illust .wrap .layer.l1 {
    width: 100%;
    left: 0px;
    z-index: 5;
    transition-delay: 1s;
  }
  section#hero .inner .illust .wrap .layer.l2 {
    width: 100%;
    position: absolute;
    left: 0px;
    z-index: 6;
    transition-delay: 0.75s;
  }
  section#hero .inner .illust .wrap .layer.l3 {
    width: 100%;
    position: absolute;
    left: 0px;
    z-index: 7;
    transition-delay: 0.5s;
  }
  section#hero .inner .illust .wrap .base {
    width: 100%;
    pointer-events: none;
  }
  section#hero .inner .illust .wrap .base > div {
    width: 100%;
    position: absolute;
    bottom: 60px;
    left: 0px;
    opacity: 0;
  }
  section#hero .inner .illust .wrap .base > div.base1 {
    transition: all 0.6s ease-in 0s;
    clip-path: circle(50% at 50% 50%);
    position: relative;
    top: auto;
    left: auto;
    opacity: 1;
  }
  section#hero .inner .illust .wrap .base > div.base2 {
    z-index: 1;
    transition: all 0.65s ease-in 0.5s;
  }
  section#hero .inner .illust .wrap .base > div.base3 {
    z-index: 2;
    transition: all 0.5s ease-in 1s;
  }
  section#hero .inner .illust .wrap .base > div.base4 {
    z-index: 3;
    transition: all 0.55s ease-in 0.9s;
  }
  section#hero .inner .illust .wrap .base > div.base5 {
    z-index: 4;
    transition: all 0.6s ease-in 0s;
    bottom: 0px;
  }
  section#hero .inner .illust .wrap .base > div.base6 {
    z-index: 5;
    transition: all 0.675s ease-out 1.5s;
    clip-path: circle(50% at 50% 50%);
  }
  section#hero .inner .illust .wrap .base > div.base7 {
    z-index: 6;
    transition: all 0.5s ease-out 1.1s;
  }
  section#hero .inner .illust .wrap .base > div.base8 {
    z-index: 7;
    transition: all 0.6s ease-out 1.3s;
  }
  section#hero .inner .illust .wrap .base > div.base9 {
    z-index: 8;
    transition: all 0.6s ease-in 0s;
    bottom: 0px;
  }
  section#hero .inner .illust .wrap .base > div.base10 {
    z-index: 9;
    transition: all 0.6s ease-out 1.3s;
  }
  section#hero .inner .illust .wrap .base > div.base11 {
    z-index: 10;
    transition: all 0.67s ease-out 1.25s;
  }
  section#hero .inner .illust .wrap .base > div.base12 {
    z-index: 10;
    transition: all 0.6s ease-in 0s;
    bottom: 0px;
  }
  section#hero .inner .illust .wrap .base > div.base13 {
    z-index: 12;
    transition: all 0.6s ease-out 1.3s;
  }
  section#hero .inner .illust .wrap .base > div.base14 {
    z-index: 13;
    transition: all 0.65s ease-out 1.5s;
  }
  section#hero .inner .illust .wrap .base > div.base15 {
    z-index: 14;
    transition: all 0.65s ease-out 1.25s;
  }
  section#hero .inner .illust .wrap .base > div.base16 {
    z-index: 15;
    transition: all 0.575s ease-out 2s;
  }
  section#hero .inner .illust .wrap .base > div.base17 {
    z-index: 16;
    transition: all 0.55s ease-out 2s;
  }
  section#hero .inner .illust .wrap .base > div.base18 {
    z-index: 17;
    transition: all 0.575s ease-out 1.75s;
    clip-path: circle(50% at 50% 50%);
  }
  section#hero .inner .illust .wrap .base > div.base19 {
    z-index: 18;
    transition: all 0.75s ease-out 1.8s;
  }
  section#hero .inner .illust .wrap .base > div.base20 {
    z-index: 19;
    transition: all 0.575s ease-out 1.9s;
    clip-path: circle(50% at 50% 50%);
  }
  section#hero .inner .illust .wrap .base > div.base21 {
    z-index: 20;
    transition: all 0.55s ease-out 2s;
    animation: yurayura 5s linear infinite;
  }
  section#hero .inner .message {
    padding: 32px 32px 0 32px;
  }
  section#hero .inner .message .text {
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    z-index: 3;
  }
  section#hero .inner .message .text h4 {
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-stat;
  }
  section#hero .inner .message .text h4 > span {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.875;
    letter-spacing: 0.1em;
    font-feature-settings: "palt";
    position: relative;
  }
  section#hero .inner .message .text h4 > span > span {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    top: 0px;
    right: 0px;
  }
  section#hero .inner .message .text p {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    position: relative;
  }
  section#hero .inner .message .text p:not(:last-child) {
    margin-bottom: 8px;
  }
  section#hero .inner .message .text p:nth-last-child(2) {
    margin-bottom: 32px;
  }
  section#hero .inner .message .text p > span {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
  }
  section#hero .inner .message .text .link {
    opacity: 0;
    transition: all 0.3s ease-in 0s;
  }
  section#hero .inner .message .text .link.on {
    opacity: 1;
  }
  section#hero .inner .message .text .link:hover a span {
    color: #D44B6B;
  }
  section#hero .inner .message .text .link a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 16px;
  }
  section#hero .inner .message .text .link a span {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    text-decoration: underline;
    transition: all 0.3s ease-in 0s;
  }
  section#hero .inner .message .text .link a::after {
    content: "";
    width: 37px;
    height: 25px;
    background-image: url(../../common/images/btn1.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
  }
  section#interview {
    width: 100%;
    margin: 0 auto 96px auto;
    position: relative;
  }
  section#interview .deco {
    position: absolute;
    bottom: -96px;
  }
  section#interview .deco.deco1 {
    width: 72px;
    left: calc(50% - 591px - 72px);
  }
  section#interview .deco.deco2 {
    width: 52px;
    left: calc(50% - 52px - 20px);
    display: none;
  }
  section#interview .deco.deco3 {
    width: 63px;
    left: calc(50% - 31px);
    display: none;
  }
  section#interview .deco.deco4 {
    width: 86px;
    top: 80vw;
    bottom: auto;
    left: calc(100% - 86px - 40px);
  }
  section#interview .inner {
    width: 100%;
    padding: 0 0 0 16px;
    overflow: hidden;
  }
  section#interview .inner .title {
    width: calc(100% - 16px);
  }
  section#interview .inner .interview {
    border-top: solid 1px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;
    position: relative;
  }
  section#interview .inner .interview::before {
    content: "";
    width: 16px;
    height: 2px;
    background-color: #FFF;
    display: block;
    position: absolute;
    top: -1px;
    right: 0px;
    z-index: 1;
  }
  section#interview .inner .interview .set {
    text-align: left;
    width: 100%;
  }
  section#interview .inner .interview .set:not(:last-child) {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
  }
  section#interview .inner .interview .set .mytt {
    width: calc(100% - 16px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }
  section#interview .inner .interview .set .mytt h4 {
    color: #000;
    font-family: "din-2014", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section#interview .inner .interview .set .mytt h4 span.col1 {
    color: #405E91;
  }
  section#interview .inner .interview .set .mytt h4 span.col2 {
    color: #D44B6B;
  }
  section#interview .inner .interview .set .slider {
    width: calc(100% - 48px);
    margin-bottom: 16px;
    overflow: visible;
  }
  section#interview .inner .interview .set .slider .swiper-slide {
    width: 100%;
  }
  section#interview .inner .interview .set .slider .swiper-slide a {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    display: block;
  }
  section#interview .inner .interview .set .slider .swiper-slide a:hover .ph img {
    transform: scale(1.05);
  }
  section#interview .inner .interview .set .slider .swiper-slide a .text {
    text-align: left;
    width: calc(100% - 32px);
    height: calc(100% - 16px);
    position: absolute;
    top: 0px;
    left: 16px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 24px 0;
  }
  section#interview .inner .interview .set .slider .swiper-slide a .text dl dt {
    color: #FFF;
    font-family: "din-2014", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    margin-bottom: 8px;
  }
  section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(2) {
    margin-bottom: 8px;
  }
  section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(2) span {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(3) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 8px;
  }
  section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(3) span:nth-child(1) {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(3) span:nth-child(2) {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section#interview .inner .interview .set .slider .swiper-slide a .text dl dd:nth-child(3) span:nth-child(3) {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    width: 91px;
    height: 21px;
  }
  section#interview .inner .interview .set .slider .swiper-slide a .ph {
    width: 100%;
  }
  section#interview .inner .interview .set .slider .swiper-slide a .ph img {
    width: 100%;
    transition: all 0.25s ease-in 0s;
  }
  section#interview .inner .interview .set .button {
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 8px;
    position: relative;
  }
  section#interview .inner .interview .set .button .arrow {
    width: 55px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in 0s;
    cursor: pointer;
  }
  section#interview .inner .interview .set .button .arrow.next {
    background-image: url(../../common/images/btn_arrow_next1.png);
  }
  section#interview .inner .interview .set .button .arrow.next:hover {
    background-image: url(../../common/images/btn_arrow_next2.png);
  }
  section#interview .inner .interview .set .button .arrow.prev {
    background-image: url(../../common/images/btn_arrow_prev1.png);
  }
  section#interview .inner .interview .set .button .arrow.prev:hover {
    background-image: url(../../common/images/btn_arrow_prev2.png);
  }
  section#interview .inner .interview .set .button .count {
    width: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  section#interview .inner .interview .set .button .count span {
    color: #000;
    font-family: "din-2014", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section#interview .inner .interview .set .button .count span::before {
    content: "0";
    display: inline;
  }
  section#interview .inner .interview .set .button .count span.swiper-pagination-total {
    opacity: 0.5;
  }
  section#interview .inner .interview .set .button .pager {
    width: 100%;
    height: 7px;
    padding: 1px;
    background-color: #ECE7E0;
    border-radius: 8px;
    margin: 0;
    top: 0px;
    right: 16px;
    flex-shrink: 1;
    position: relative;
    opacity: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  section#interview .inner .interview .set .button .pager span {
    width: 33%;
    background-color: transparent;
    height: 5px;
    margin: 0px;
    border-radius: 8px;
  }
  section#interview .inner .interview .set .button .pager span.swiper-pagination-bullet-active {
    background-color: #405E91;
  }
  section#crosstalk {
    width: 100%;
    background-color: #ECE7E0;
    padding: 96px 0;
    margin: 0 auto 64px auto;
    overflow: hidden;
    position: relative;
  }
  section#crosstalk .deco.deco5 {
    width: 182px;
    position: absolute;
    top: 90vw;
    bottom: auto;
    left: 50%;
    z-index: 0;
  }
  section#crosstalk::before {
    content: "";
    width: 1716px;
    height: 1142px;
    background-image: url(../images/bg_crosstalk.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    position: absolute;
    top: -800px;
    left: calc(50% - 540px);
    z-index: 0;
  }
  section#crosstalk::after {
    content: "";
    width: 1716px;
    height: 1142px;
    background-image: url(../images/bg_crosstalk.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    position: absolute;
    top: -40px;
    left: calc(50% - 858px);
    z-index: 0;
  }
  section#crosstalk .title {
    position: relative;
    z-index: 1;
  }
  section#crosstalk .button {
    width: 100%;
    padding: 0 16px;
    border-top: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    position: relative;
    z-index: 1;
  }
  section#crosstalk .button .arrow {
    width: 55px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in 0s;
    cursor: pointer;
  }
  section#crosstalk .button .arrow.next {
    background-image: url(../../common/images/btn_arrow_next1.png);
  }
  section#crosstalk .button .arrow.next:hover {
    background-image: url(../../common/images/btn_arrow_next2.png);
  }
  section#crosstalk .button .arrow.prev {
    background-image: url(../../common/images/btn_arrow_prev1.png);
  }
  section#crosstalk .button .arrow.prev:hover {
    background-image: url(../../common/images/btn_arrow_prev2.png);
  }
  section#crosstalk .button .count {
    width: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  section#crosstalk .button .count span {
    color: #000;
    font-family: "din-2014", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section#crosstalk .button .count span::before {
    content: "0";
    display: inline;
  }
  section#crosstalk .button .count span.swiper-pagination-total {
    opacity: 0.5;
  }
  section#crosstalk .inner {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
  }
  section#crosstalk .inner .title {
    padding: 0 16px;
    order: 1;
  }
  section#crosstalk .inner .button {
    order: 3;
  }
  section#crosstalk .inner .button .mypager {
    width: 100%;
    height: 7px;
    padding: 1px;
    background-color: #FFF;
    border-radius: 8px;
    margin: 0;
    top: 0px;
    right: 16px;
    flex-shrink: 1;
    position: relative;
    opacity: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  section#crosstalk .inner .button .mypager span {
    width: 50%;
    background-color: transparent;
    height: 5px;
    margin: 0px;
    border-radius: 8px;
  }
  section#crosstalk .inner .button .mypager span.swiper-pagination-bullet-active {
    background-color: #405E91;
  }
  section#crosstalk .inner .mybar {
    width: 100%;
  }
  section#crosstalk .inner .ct-slider {
    width: calc(100% - 31px);
    margin-bottom: 24px;
    order: 2;
  }
  section#crosstalk .inner .ct-slider .swiper-slide {
    opacity: 0.3;
  }
  section#crosstalk .inner .ct-slider .swiper-slide.swiper-slide-active {
    opacity: 1;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a {
    width: 100%;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    display: block;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a:hover .ph img {
    transform: scale(1);
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text {
    text-align: left;
    width: calc(100% - 48px);
    height: calc(100% - 24px);
    position: relative;
    top: 0px;
    left: 24px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 24px 0;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text dl dt {
    color: #000;
    font-family: "din-2014", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    margin-bottom: 16px;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(2) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px 0;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(2) span {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    background-color: transparent;
    padding: 0px;
    border-radius: 0px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px 0;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(2) span span {
    background-color: #FFF;
    padding: 12px;
    border-radius: 4px;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 24px;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) .person {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 12px;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) .person span:nth-child(1) {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) .person span:nth-child(2) {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) .person span:nth-child(3) {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    width: 118px;
    height: 26px;
    border: solid 1px #FFF;
    border-radius: 24px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .text dl dd:nth-child(3) .cross {
    width: 17px;
    height: 17px;
    background-image: url(../images/text_cross.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }
  section#crosstalk .inner .ct-slider .swiper-slide a .ph {
    width: 100%;
    margin-bottom: 24px;
  }
  section#work {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  section#work .inner {
    width: calc(100% - 32px);
    margin: 0 auto;
  }
  section#work .inner .business {
    width: 100%;
    padding: 40px 0 0 0;
    border-top: solid 1px rgba(115, 103, 90, 0.2);
  }
  section#work .inner .business h4 {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    text-align: left;
    margin-bottom: 24px;
  }
  section#work .inner .business .inbusiness {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px 0;
  }
  section#work .inner .business .inbusiness .biz {
    width: 100%;
  }
  section#work .inner .business .inbusiness .biz a {
    width: 100%;
    height: auto;
    min-height: 204px;
    background-color: #F9F7F4;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 16px;
    position: relative;
    transition: background-color 0.2s linear 0s;
  }
  section#work .inner .business .inbusiness .biz a::before {
    left: auto;
    top: 16px;
    right: 16px;
  }
  section#work .inner .business .inbusiness .biz a::after {
    content: "";
    width: 14px;
    height: 8px;
    background-image: url(../images/arrow_work1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    transition: all 0.3s ease-in 0s;
  }
  section#work .inner .business .inbusiness .biz a:hover {
    background-color: #D44B6B;
  }
  section#work .inner .business .inbusiness .biz a:hover::before {
    color: #FFF;
  }
  section#work .inner .business .inbusiness .biz a:hover::after {
    background-image: url(../images/arrow_work2.png);
  }
  section#work .inner .business .inbusiness .biz a:hover dl dt {
    color: #FFF;
  }
  section#work .inner .business .inbusiness .biz a:hover dl dd {
    color: #FFF;
  }
  section#work .inner .business .inbusiness .biz a:hover p {
    color: #FFF;
  }
  section#work .inner .business .inbusiness .biz a dl {
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 24px;
  }
  section#work .inner .business .inbusiness .biz a dl dt {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    margin-bottom: 8px;
    transition: all 0.3s ease-in 0s;
  }
  section#work .inner .business .inbusiness .biz a dl dt br {
    display: none;
  }
  section#work .inner .business .inbusiness .biz a dl dd {
    color: #000;
    font-family: "din-2014", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    font-feature-settings: "palt";
    opacity: 0.5;
    transition: all 0.3s ease-in 0s;
  }
  section#work .inner .business .inbusiness .biz a p {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.875;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    text-align: left;
    transition: all 0.3s ease-in 0s;
  }
  section#info {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  section#info::before {
    content: "";
    width: 100vw;
    height: 280vw;
    background-image: url(../images/bg_info_sp.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    position: absolute;
    top: 240px;
    left: 0px;
    z-index: -1;
  }
  section#info .illustcombo {
    width: 100%;
    margin-bottom: 140px;
  }
  section#info .illustcombo .swiper-wrapper {
    width: 100%;
    transition-timing-function: linear;
  }
  section#info .inner {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  section#info .inner .title {
    width: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  section#info .inner .title > div {
    margin-bottom: 0px;
  }
  section#info .inner .title > div h3 {
    color: #FFF;
    font-family: "din-2014", sans-serif;
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section#info .inner .title > div p span {
    color: #FFF;
  }
  section#info .inner .contents {
    width: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: fle-start;
    align-items: flex-start;
    margin-bottom: 80px;
    position: relative;
  }
  section#info .inner .contents::before {
    content: "";
    width: 100vw;
    height: 100vw;
    background-image: url(../images/bg_info_sp2.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    position: absolute;
    bottom: -100px;
    left: calc(50% - 50vw);
  }
  section#info .inner .contents .lead {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: solid 1px rgba(255, 255, 255, 0.2);
  }
  section#info .inner .contents .lead dl {
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px 0;
  }
  section#info .inner .contents .lead dl dd:nth-child(1) {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.875;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  section#info .inner .contents .lead dl dd:nth-child(1) br {
    display: none;
  }
  section#info .inner .contents .lead dl dd:nth-child(2) a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0 8px;
  }
  section#info .inner .contents .lead dl dd:nth-child(2) a:hover span {
    color: #D44B6B;
  }
  section#info .inner .contents .lead dl dd:nth-child(2) a span {
    color: #FFF;
    font-family: "din-2014", sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    font-feature-settings: "palt";
    transition: all 0.3s ease-in 0s;
  }
  section#info .inner .contents .lead dl dd:nth-child(2) a::after {
    width: 37px;
    height: 25px;
    background-image: url(../../common/images/btn0.svg);
  }
  section#info .inner .contents .link {
    text-align: left;
    width: 100%;
    position: relative;
    transform: none;
  }
  section#info .inner .contents .link .deco.deco6 {
    width: 119px;
    position: absolute;
    top: -496px;
    left: calc(100% - 119px - 32px);
    z-index: 3;
  }
  section#info .inner .contents .link dl dt {
    color: #FFF;
    font-family: "din-2014", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    margin-bottom: 16px;
  }
  section#info .inner .contents .link dl dd ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px 0;
  }
  section#info .inner .contents .link dl dd ul li {
    width: 100%;
  }
  section#info .inner .contents .link dl dd ul li a {
    width: 100%;
    height: 64px;
    background-color: #FFF;
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    transition: all 0.3s ease-in 0s;
  }
  section#info .inner .contents .link dl dd ul li a:hover {
    background-color: #D44B6B;
    border-radius: 40px;
  }
  section#info .inner .contents .link dl dd ul li a:hover::after {
    background-image: url(../images/arrow_work2.png);
  }
  section#info .inner .contents .link dl dd ul li a:hover span {
    color: #FFF;
  }
  section#info .inner .contents .link dl dd ul li a::after {
    content: "";
    width: 14px;
    height: 8px;
    background-image: url(../images/arrow_work1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    position: absolute;
    top: calc(50% - 4px);
    right: 24px;
    z-index: 1;
  }
  section#info .inner .contents .link dl dd ul li a span {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    position: relative;
    transform: translateX(24px);
    transition: all 0.3s ease-in 0s;
  }
}

/*# sourceMappingURL=style_home.css.map */