@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;800&display=swap");
@import url("https://use.typekit.net/yvr1aan.css");
@keyframes bar-anime {
  0% {
    height: 40px;
    top: -40px;
  }
  75% {
    height: 40px;
    top: 50px;
  }
  100% {
    height: 40px;
    top: 50px;
  }
}
@keyframes bar-anime-sp {
  0% {
    height: 40px;
    top: -40px;
  }
  75% {
    height: 40px;
    top: 40px;
  }
  100% {
    height: 40px;
    top: 40px;
  }
}
@keyframes bound {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  20% {
    transform: translateY(10px);
    opacity: 0;
  }
  40% {
    transform: translateY(-10px);
    opacity: 1;
  }
  60% {
    transform: translateY(-10px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
/* ---------------------------------------------------------page--------------------------------------------------------- */
main {
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  overflow: hidden;
}
main #visual {
  width: 100%;
  min-width: 1240px;
  max-width: 1360px;
  padding: 88px 0 0 0;
  margin: 0 auto;
  position: relative;
}
main #visual.on .invisual figure::before {
  clip-path: inset(0 0 0 0);
}
main #visual.on .invisual figure img {
  clip-path: inset(0 0 0 0);
}
main #visual.on .invisual .title {
  opacity: 1;
}
main #visual.on .invisual .balloon {
  animation-name: bound;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-delay: 1s;
}
main #visual:not(:last-child) {
  margin-bottom: 104px;
}
main #visual .invisual {
  width: 100%;
  position: relative;
}
main #visual .invisual figure {
  width: 120%;
  position: relative;
  left: calc(50% - 60vw);
  opacity: 1;
  transition: all 0.5s ease-in 0s;
}
main #visual .invisual figure::before {
  content: "";
  width: 100%;
  height: 58.2vw;
  background-image: url(../images/factory/bg_visual.webp);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  display: block;
  position: absolute;
  bottom: -30px;
  left: calc(50% - 60vw);
  clip-path: inset(0 0 100% 0);
  transition: all 0.5s ease-in 0s;
}
main #visual .invisual figure img {
  position: relative;
  z-index: 1;
  clip-path: inset(0 0 100% 0);
  transition: all 0.5s ease-in 0s;
}
main #visual .invisual .balloon {
  width: 277px;
  position: absolute;
  top: 40px;
  left: calc(50% - 600px);
  z-index: 3;
  opacity: 0;
}
main #visual .invisual .balloon p {
  width: 100%;
  height: 185px;
  background-image: url(../images/factory/balloon_visual.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transform: rotate(-12deg);
  position: relative;
}
main #visual .invisual .balloon p span {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
  position: relative;
  transform: translateY(-20px);
}
main #visual .invisual .title {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s ease-in 0.5s;
}
main #visual .invisual .title h3 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  background-color: #FFF;
  padding: 8px;
}
main #lead {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
main #lead:not(:last-child) {
  margin-bottom: 120px;
}
main #lead.on p {
  opacity: 1;
}
main #lead.on .deco {
  opacity: 1;
  top: calc(100% + 64px);
}
main #lead p {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.2em;
  opacity: 0;
  transition: opacity 0.5s ease-in 0s;
}
main #lead .deco {
  width: 335px;
  position: absolute;
  top: 100%;
  left: calc(100% - 304px);
  opacity: 0;
  transition: opacity 0.5s ease-in 0.5s;
}
main article {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  opacity: 0;
  transition: all 0.35s ease-in 0s;
}
main article.on {
  opacity: 1;
}
main article figure {
  width: 335px;
  position: relative;
}
main article figure.d3 {
  transform: translateX(32px);
}
main article figure.d5 {
  transform: translateX(120px);
}
main .sec {
  width: 100%;
  min-width: 1240px;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
main .sec#sec1:not(:last-child) {
  margin-bottom: 112px;
}
main .sec#sec1.on .inner h4 {
  opacity: 1;
}
main .sec#sec1.on .inner .deco {
  opacity: 1;
}
main .sec#sec1 .inner .deco {
  position: absolute;
  transition: all 0.35s ease-in 0.75s;
  opacity: 0;
}
main .sec#sec1 .inner .deco.d2 {
  width: 335px;
  top: 64px;
  left: -128px;
  transition-delay: 0.25s;
}
main .sec#sec1 .inner h4 {
  background-image: url(../images/factory/title_point1.png);
  width: 652px;
  height: 165px;
  transition: all 0.35s ease-in 0s;
  opacity: 0;
}
main .sec#sec1 .inner .combo {
  opacity: 0;
  transition: all 0.5s ease-in 0.5s;
}
main .sec#sec1 .inner .combo.on {
  opacity: 1;
}
main .sec#sec1 .inner .combo.type2 {
  margin-bottom: 48px;
}
main .sec#sec1 .inner .combo.type2 .text {
  width: calc(100% - 550px - 120px);
  transform: translateX(-120px);
  order: 2;
}
main .sec#sec1 .inner .combo.type2 figure {
  width: 550px;
  order: 1;
  transform: translateX(-40px);
}
main .sec#sec1 .inner .combo .text {
  width: calc(100% - 655px - 120px - 8px);
  padding: 48px 0 0 0;
  position: relative;
  transform: translateX(120px);
}
main .sec#sec1 .inner .combo figure {
  width: 655px;
  position: relative;
  transform: translateX(32px);
}
main .sec#sec2:not(:last-child) {
  margin-bottom: 120px;
}
main .sec#sec2.on .inner h4 {
  opacity: 1;
}
main .sec#sec2.on .inner .deco.d4 {
  opacity: 1;
}
main .sec#sec2 .inner .deco {
  position: absolute;
}
main .sec#sec2 .inner .deco.d4 {
  width: 335px;
  top: 64px;
  left: -128px;
  transition: all 0.35s ease-in 0.5s;
  opacity: 0;
}
main .sec#sec2 .inner h4 {
  background-image: url(../images/factory/title_point2.png);
  width: 675px;
  height: 165px;
  transition: all 0.35s ease-in 0s;
  opacity: 0;
}
main .sec#sec2 .inner .combo {
  margin-bottom: 48px;
  opacity: 0;
  transition: all 0.5s ease-in 0s;
}
main .sec#sec2 .inner .combo.on {
  opacity: 1;
}
main .sec#sec2 .inner .combo .text {
  width: calc(100% - 655px - 120px - 8px);
  padding: 48px 0 0 0;
  position: relative;
  transform: translateX(120px);
}
main .sec#sec2 .inner .combo figure {
  width: 655px;
  position: relative;
  transform: translateX(32px);
}
main .sec#sec2 .inner .comment.on dl {
  transform: rotate(-5deg) translateX(-40px) translateY(0px);
}
main .sec#sec2 .inner .comment dl {
  width: 834px;
  padding: 48px 48px 48px 133px;
  background-image: url(../images/factory/balloon2.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 32px 0;
  transform: rotate(-5deg) translateX(-48px) translateY(24px);
  order: 2;
}
main .sec#sec2 .inner .comment dl dt {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.05em;
}
main .sec#sec2 .inner .comment dl dd {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0em;
}
main .sec#sec2 .inner .comment > figure {
  width: 357px;
  transform: translateX(40px);
  order: 1;
}
main .sec#sec3 {
  margin-bottom: 128px;
}
main .sec#sec3.on .inner h4 {
  opacity: 1;
}
main .sec#sec3.on .inner .deco.d6 {
  opacity: 1;
}
main .sec#sec3.on .inner .combo {
  opacity: 1;
}
main .sec#sec3 .inner .deco {
  position: absolute;
}
main .sec#sec3 .inner .deco.d6 {
  width: 335px;
  top: 680px;
  left: -80px;
  transition: all 0.35s ease-in 0.5s;
  opacity: 0;
}
main .sec#sec3 .inner h4 {
  background-image: url(../images/factory/title_point3.png);
  width: 882px;
  height: 146px;
}
main .sec#sec3 .inner .combo {
  width: calc(100% - 240px);
  margin-bottom: 48px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
main .sec#sec3 .inner .combo.on .text {
  opacity: 1;
}
main .sec#sec3 .inner .combo.on figure {
  opacity: 1;
}
main .sec#sec3 .inner .combo .text {
  width: 528px;
  padding: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  transition: all 0.35s ease-in 0s;
}
main .sec#sec3 .inner .combo figure {
  width: 970px;
  opacity: 0;
  transition: all 0.35s ease-in 0.5s;
}
main .sec#sec3 .inner .schedule {
  width: calc(100% - 240px);
  max-width: 1440px;
  min-width: 1080px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 80px;
  opacity: 0;
  transition: all 0.35s ease-in 0s;
}
main .sec#sec3 .inner .schedule.on {
  opacity: 1;
}
main .sec#sec3 .inner .schedule h5 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 32px;
}
main .sec#sec3 .inner .careerpath {
  width: calc(100% - 240px);
  max-width: 1440px;
  min-width: 1080px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  opacity: 0;
  transition: all 0.35s ease-in 0s;
}
main .sec#sec3 .inner .careerpath.on {
  opacity: 1;
}
main .sec#sec3 .inner .careerpath:not(:last-child) {
  margin-bottom: 120px;
}
main .sec#sec3 .inner .careerpath h5 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  position: absolute;
  top: 0px;
  left: 0px;
}
main .sec#interview {
  width: 100%;
  max-width: 100%;
  background-image: url(../images/factory/bg_interview.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 48px 0;
}
main .sec#interview .inner {
  width: calc(100% - 240px);
}
main .sec#interview .inner h3 {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0 16px;
  margin-bottom: 40px;
}
main .sec#interview .inner h3::before {
  content: "";
  width: 2px;
  height: 40px;
  background-color: #000;
  display: block;
  transform: rotate(-15deg);
}
main .sec#interview .inner h3::after {
  content: "";
  width: 2px;
  height: 40px;
  background-color: #000;
  display: block;
  transform: rotate(15deg);
}
main .sec#interview .inner h3 span {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}
main .sec#interview .inner .inin {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 0 48px;
}
main .sec#interview .inner .inin > div {
  width: 456px;
}
main .sec#interview .inner .inin > div a {
  width: 100%;
  position: relative;
  display: block;
}
main .sec#interview .inner .inin > div a:hover figure img {
  transform: scale(1.05);
}
main .sec#interview .inner .inin > div a:hover dl dt {
  color: #FFF;
}
main .sec#interview .inner .inin > div a:hover dl dd:nth-child(2), main .sec#interview .inner .inin > div a:hover dl dd:nth-child(3) {
  color: #FFF;
}
main .sec#interview .inner .inin > div a figure {
  width: 312px;
  border-radius: 8px;
  overflow: hidden;
}
main .sec#interview .inner .inin > div a figure img {
  width: 100%;
  transition: all 0.3s ease-in 0s;
}
main .sec#interview .inner .inin > div a dl {
  width: 184px;
  height: 172px;
  background-image: url(../images/factory/bg_int_prof.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px 0;
  padding: 16px;
  border-radius: 8px;
  position: absolute;
  top: calc(100% - 172px - 16px);
  right: 0px;
  z-index: 1;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
main .sec#interview .inner .inin > div a dl dt {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: all 0.3s ease-in 0s;
}
main .sec#interview .inner .inin > div a dl dd {
  transition: all 0.3s ease-in 0s;
}
main .sec#interview .inner .inin > div a dl dd:nth-child(2) {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}
main .sec#interview .inner .inin > div a dl dd:nth-child(2) small {
  font-size: 1.6rem;
}
main .sec#interview .inner .inin > div a dl dd:nth-child(3) {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}
main .sec#entry {
  width: 100%;
  max-width: 100%;
  padding: 48px 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 48px 0;
  background-image: url(../images/factory/bg_entry.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
main .sec#entry p {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}
main .sec#entry > div {
  width: calc(100% - 240px);
  max-width: 1600px;
}
main .sec#entry > div a {
  color: #fb4b23;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  width: 100%;
  height: 120px;
  background-color: #FFF;
  border-radius: 8px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease-in 0s;
}
main .sec#entry > div a:hover {
  color: #FFF;
  background-color: #f7931e;
}
main .sec#entry > div a:hover::after {
  background-color: #FFF;
}
main .sec#entry > div a::after {
  content: "";
  width: 40px;
  height: 1px;
  background-color: #fb4b23;
  display: block;
  position: absolute;
  top: 50%;
  right: 0px;
  transition: all 0.3s ease-in 0s;
}
main .sec#catlink {
  max-width: 100%;
}
main .sec .inner {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
main .sec .inner h4 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}
main .sec .inner h4:not(:last-child) {
  margin-bottom: 48px;
}
main .sec .inner .graph {
  width: 100%;
}
main .sec .inner .graph figure {
  width: 100%;
}
main .sec .inner .combo {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
main .sec .inner .combo .text h5 {
  color: #fb4b23;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
main .sec .inner .combo .text h5:not(:last-child) {
  margin-bottom: 24px;
}
main .sec .inner .combo .text p {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.875;
  letter-spacing: 0em;
}
main .sec .inner .comment {
  width: 1240px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
main .sec .inner .comment.on dl {
  opacity: 1;
  transform: rotate(-5deg) translateX(40px) translateY(0px);
}
main .sec .inner .comment.on > figure {
  opacity: 1;
}
main .sec .inner .comment dl {
  width: 834px;
  padding: 48px 104px 48px 48px;
  background-image: url(../images/factory/balloon1.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px 0;
  transform: rotate(-5deg) translateX(48px) translateY(24px);
  opacity: 0;
  transition: all 0.25s ease-in 0.5s;
}
main .sec .inner .comment dl dt {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.05em;
}
main .sec .inner .comment dl dd {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0em;
}
main .sec .inner .comment > figure {
  width: 338px;
  transform: translateX(-40px);
  opacity: 0;
  transition: all 0.35s ease-in 0.25s;
}

/* ----------------------------------------------- Media Queries Smartphone ----------------------------------------------- */
@media screen and (min-width: 1360px) {
  main #visual .invisual {
    width: 100%;
    position: relative;
  }
  main #visual .invisual figure {
    left: calc(50% - 816px);
  }
  main #visual .invisual figure::before {
    width: 1632px;
    height: 666px;
    bottom: -30px;
    left: calc(50% - 816px);
  }
}
@media screen and (max-width: 1240px) {
  main #visual .invisual {
    width: 100%;
    position: relative;
  }
  main #visual .invisual figure {
    left: calc(50% - 744px);
  }
  main #visual .invisual figure::before {
    width: 1488px;
    height: 608px;
    bottom: -30px;
    left: calc(50% - 744px);
  }
}
@media screen and (max-width: 768px) {
  @keyframes finger {
    0% {
      transform: translateX(40px);
    }
    100% {
      transform: translateX(-40px);
    }
  }
  main #visual {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 89px 0 0 0;
  }
  main #visual.on .invisual figure::before {
    clip-path: inset(0 0 0 0);
  }
  main #visual.on .invisual figure img {
    clip-path: inset(0 0 0 0);
  }
  main #visual.on .invisual .title {
    opacity: 1;
  }
  main #visual.on .invisual .balloon {
    animation-name: bound;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 1s;
  }
  main #visual:not(:last-child) {
    margin-bottom: 48px;
  }
  main #visual .invisual {
    width: 100%;
    position: relative;
  }
  main #visual .invisual figure {
    width: 120%;
    position: relative;
    left: calc(50% - 60vw);
  }
  main #visual .invisual figure::before {
    width: 100%;
    height: 58.2vw;
    bottom: -16px;
    left: calc(50% - 60vw);
  }
  main #visual .invisual figure img {
    position: relative;
    z-index: 1;
    clip-path: inset(0 0 100% 0);
    transition: all 0.5s ease-in 0s;
  }
  main #visual .invisual .balloon {
    width: 104px;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    opacity: 0;
  }
  main #visual .invisual .balloon p {
    width: 100%;
    height: 70px;
  }
  main #visual .invisual .balloon p span {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.1em;
    position: relative;
    transform: translateY(-10px);
  }
  main #visual .invisual .title h3 {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    background-color: #FFF;
    padding: 8px;
  }
  main #lead {
    width: calc(100% - 32px);
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  main #lead:not(:last-child) {
    margin-bottom: 120px;
  }
  main #lead.on p {
    opacity: 1;
  }
  main #lead.on .deco {
    opacity: 1;
    top: calc(100% + 32px);
  }
  main #lead p {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.1em;
    text-align: center;
  }
  main #lead p br {
    display: none;
  }
  main #lead p br.brsp {
    display: block;
  }
  main #lead .deco {
    width: 160px;
    top: 100%;
    left: calc(100% - 144px);
  }
  main article figure {
    width: 160px;
    position: relative;
  }
  main article figure.d3 {
    transform: translateX(16px);
  }
  main article figure.d5 {
    transform: translateX(56px);
  }
  main .sec {
    min-width: 100%;
    max-width: 100%;
  }
  main .sec#sec1:not(:last-child) {
    margin-bottom: 56px;
  }
  main .sec#sec1.on .inner h4 {
    opacity: 1;
  }
  main .sec#sec1.on .inner .deco {
    opacity: 1;
  }
  main .sec#sec1 .inner .deco.d2 {
    width: 144px;
    top: 40px;
    left: -80px;
  }
  main .sec#sec1 .inner h4 {
    background-image: url(../images/factory/title_point1_sp.png);
    width: 260px;
    height: 158px;
  }
  main .sec#sec1 .inner .combo {
    margin-bottom: 32px;
  }
  main .sec#sec1 .inner .combo.type2 {
    margin-bottom: 32px;
  }
  main .sec#sec1 .inner .combo.type2 .text {
    width: calc(100% - 32px);
    transform: translateX(0px);
    order: 1;
  }
  main .sec#sec1 .inner .combo.type2 figure {
    width: calc(100% - 16px);
    order: 2;
    transform: translateX(0px);
  }
  main .sec#sec1 .inner .combo .text {
    width: calc(100% - 32px);
    padding: 0px;
    position: relative;
    transform: none;
  }
  main .sec#sec1 .inner .combo figure {
    width: calc(100% - 32px);
    position: relative;
    transform: translateX(0px);
  }
  main .sec#sec2:not(:last-child) {
    margin-bottom: 40px;
  }
  main .sec#sec2 .inner .deco {
    position: absolute;
  }
  main .sec#sec2 .inner .deco.d4 {
    width: 144px;
    top: 40px;
    left: -40px;
  }
  main .sec#sec2 .inner h4 {
    background-image: url(../images/factory/title_point2_sp.png);
    width: 300px;
    height: 160px;
    transition: all 0.35s ease-in 0s;
    opacity: 0;
  }
  main .sec#sec2 .inner .combo {
    margin-bottom: 32px;
  }
  main .sec#sec2 .inner .combo .text {
    width: calc(100% - 32px);
    padding: 0px;
    position: relative;
    transform: translateX(0px);
    order: 1;
  }
  main .sec#sec2 .inner .combo figure {
    width: calc(100% - 32px);
    transform: translateX(0px);
    order: 2;
  }
  main .sec#sec2 .inner .comment.on dl {
    transform: none;
  }
  main .sec#sec2 .inner .comment dl {
    width: 100%;
    padding: 16px 16px 48px 16px;
    background-image: url(../images/factory/balloon_sp.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px 0;
    transform: none;
    order: 1;
  }
  main .sec#sec2 .inner .comment dl dt {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.05em;
  }
  main .sec#sec2 .inner .comment dl dd {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0em;
  }
  main .sec#sec2 .inner .comment dl::after {
    content: "";
    width: 40px;
    height: 40px;
    background-image: url(../images/factory/balloon_sp.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: block;
    clip-path: polygon(0 0, 85% 100%, 100% 0);
    position: absolute;
    top: 100%;
    left: 50%;
  }
  main .sec#sec2 .inner .comment > figure {
    width: 120px;
    margin: -32px 0 0 auto;
    transform: translateX(0px);
    order: 2;
  }
  main .sec#sec3 {
    margin-bottom: 64px;
  }
  main .sec#sec3 .inner .deco {
    position: absolute;
  }
  main .sec#sec3 .inner .deco.d6 {
    width: 160px;
    top: 504px;
    left: -24px;
  }
  main .sec#sec3 .inner h4 {
    background-image: url(../images/factory/title_point3_sp.png);
    width: 336px;
    height: 166px;
    margin-bottom: 16px;
  }
  main .sec#sec3 .inner .combo {
    width: calc(100% - 32px);
    margin-bottom: 48px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  main .sec#sec3 .inner .combo .text {
    width: 100%;
    padding: 0px;
    position: relative;
    top: auto;
    left: auto;
  }
  main .sec#sec3 .inner .combo figure {
    width: 100%;
  }
  main .sec#sec3 .inner .schedule {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    min-width: calc(100% - 32px);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 40px;
  }
  main .sec#sec3 .inner .schedule h5 {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
  }
  main .sec#sec3 .inner .careerpath {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    min-width: calc(100% - 32px);
  }
  main .sec#sec3 .inner .careerpath:not(:last-child) {
    margin-bottom: 40px;
  }
  main .sec#sec3 .inner .careerpath h5 {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    position: relative;
    top: auto;
    left: auto;
  }
  main .sec#interview {
    width: 100%;
    max-width: 100%;
    padding: 48px 0;
  }
  main .sec#interview .inner {
    width: calc(100% - 32px);
  }
  main .sec#interview .inner h3 {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0 16px;
    margin-bottom: 24px;
  }
  main .sec#interview .inner h3 span {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
  }
  main .sec#interview .inner .inin {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 0 16px;
  }
  main .sec#interview .inner .inin > div {
    width: calc(50% - 8px);
  }
  main .sec#interview .inner .inin > div a {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  main .sec#interview .inner .inin > div a:hover figure img {
    transform: scale(1);
  }
  main .sec#interview .inner .inin > div a:hover dl dt {
    color: #FFF;
  }
  main .sec#interview .inner .inin > div a:hover dl dd:nth-child(2), main .sec#interview .inner .inin > div a:hover dl dd:nth-child(3) {
    color: #FFF;
  }
  main .sec#interview .inner .inin > div a figure {
    width: 100%;
  }
  main .sec#interview .inner .inin > div a dl {
    width: calc(100% - 32px);
    height: 120px;
    background-image: url(../images/factory/bg_int_prof.jpg);
    gap: 8px 0;
    padding: 16px;
    margin-top: -24px;
    border-radius: 8px;
    position: relative;
    top: auto;
    right: auto;
  }
  main .sec#interview .inner .inin > div a dl dt {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  main .sec#interview .inner .inin > div a dl dd {
    transition: all 0.3s ease-in 0s;
  }
  main .sec#interview .inner .inin > div a dl dd:nth-child(2) {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  main .sec#interview .inner .inin > div a dl dd:nth-child(2) small {
    font-size: 1.4rem;
  }
  main .sec#interview .inner .inin > div a dl dd:nth-child(3) {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  main .sec#entry {
    width: 100%;
    max-width: 100%;
    padding: 24px 0;
    gap: 24px 0;
  }
  main .sec#entry p {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
  main .sec#entry > div {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
  }
  main .sec#entry > div a {
    color: #fb4b23;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    width: 100%;
    height: 80px;
    border-radius: 8px;
  }
  main .sec#entry > div a:hover {
    color: #fb4b23;
    background-color: #FFF;
  }
  main .sec#entry > div a:hover::after {
    background-color: #fb4b23;
  }
  main .sec#entry > div a::after {
    width: 24px;
  }
  main .sec#catlink {
    max-width: 100%;
  }
  main .sec .inner {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
  main .sec .inner h4 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }
  main .sec .inner h4:not(:last-child) {
    margin-bottom: 32px;
  }
  main .sec .inner .graph {
    width: 100%;
    position: relative;
  }
  main .sec .inner .graph.touched::before, main .sec .inner .graph.touched::after {
    opacity: 0;
    pointer-events: none;
  }
  main .sec .inner .graph::before {
    content: "横にスクロールしてください";
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    padding: 24px 0 0 0;
    border-radius: 8px;
    backdrop-filter: blur(2px);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    box-sizing: border-box;
    transition: all 0.3s ease-in 0s;
  }
  main .sec .inner .graph::after {
    content: "";
    width: 70px;
    height: 70px;
    background-image: url(../images/factory/icon_finger.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation-name: finger;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: rase;
    position: absolute;
    display: block;
    top: calc(50% - 35px);
    left: calc(50% - 35px);
    z-index: 3;
    transition: all 0.3s ease-in 0s;
  }
  main .sec .inner .graph figure {
    padding-bottom: 8px;
    overflow-x: scroll;
  }
  main .sec .inner .graph figure img {
    width: 200%;
  }
  main .sec .inner .combo {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
  main .sec .inner .combo .text {
    width: calc(100% - 32px);
  }
  main .sec .inner .combo .text:not(:last-child) {
    margin-bottom: 32px;
  }
  main .sec .inner .combo .text h5 {
    color: #fb4b23;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.05em;
  }
  main .sec .inner .combo .text h5:not(:last-child) {
    margin-bottom: 8px;
  }
  main .sec .inner .combo .text p {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.875;
    letter-spacing: 0em;
  }
  main .sec .inner .comment {
    width: calc(100% - 32px);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  main .sec .inner .comment.on dl {
    opacity: 1;
    transform: none;
  }
  main .sec .inner .comment.on > figure {
    opacity: 1;
  }
  main .sec .inner .comment dl {
    width: 100%;
    padding: 16px 16px 48px 16px;
    background-image: url(../images/factory/balloon_sp.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 8px;
    gap: 8px 0;
    transform: none;
    position: relative;
  }
  main .sec .inner .comment dl dt {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.05em;
  }
  main .sec .inner .comment dl dd {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0em;
  }
  main .sec .inner .comment dl::after {
    content: "";
    width: 40px;
    height: 40px;
    background-image: url(../images/factory/balloon_sp.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: block;
    clip-path: polygon(0 0, 15% 100%, 100% 0);
    position: absolute;
    top: 100%;
    left: calc(50% - 40px);
  }
  main .sec .inner .comment > figure {
    width: 120px;
    margin: -24px auto 0 0;
    transform: translateX(0px);
  }
}

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