/* || INITIALIZE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  font: var(--FF);
  margin: 0 auto;
}
header,
main,
footer,
div {
  position: relative;
  display: flex;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  flex-wrap: wrap;
}
div .grid {
  display: grid;
  flex-grow: 0;
  flex-wrap: nowrap;
}
header,
main,
footer {
  width: 100%;
  overflow: hidden;
}
main {
  flex-flow: column;
  overflow: hidden;
  padding-bottom: 10%;
}
main > div {
  width: 100%;
}
img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}
a,
a:hover,
a:visited {
  color: inherit;
  text-decoration: none;
}
ul {
  margin: 0 auto auto 0;
  list-style: none;
}
body {
  min-width: 1200px;
  margin-top: var(--HEADER-HEIGHT);

  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #333333;
}
h2 {
  display: inline-block;

  font-weight: bold;
  font-size: 44px;
  color: transparent;
  -webkit-text-stroke: 1px var(--BLUE);
  font-family: sans-serif;
}

/* || VARIABLE */
:root {
  /* FONTS */
  --FF: sans-serif;
  --FS: 0.8rem;
  --FS-SMALL: 12px;

  /* COLORS */
  --BORDER-COLOR: #c9c9c9;
  --BLACK: #333333;
  --ORANGE: #fdbf3f;
  --DARK-ORANGE: #eda613;
  --BLUE: #5076d0;
  --DARK-BLUE: #4461a4;
  --GRAY: #f3f4f4;
  --RED: #ff5555;

  /* BORDER */
  --BORDERS: 1px solid var(--BORDER-COLOR);

  /* SIZE */
  --MAXWIDTH: 1280px;
  --MINWIDTH: 1024px;
  --HEADER-HEIGHT: 4rem;
}

/* || UTILITY */
.just-space {
}
.padding-space-100-50 {
  padding: 25% 100%;
}
.cross-mark {
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  background-color: #ffac00;
  border-radius: 50vw;
  width: 2.4rem;
  height: 2.4rem;

  transform: rotate(45deg);
}
.cross-mark::before,
.cross-mark::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  background-color: #ffffff;
}
.cross-mark::before {
  padding: 3.5% 25%;
}
.cross-mark::after {
  padding: 25% 4%;
}

.plus-mark,
.minus-mark {
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  background-color: #ffffff;
  border-radius: 50vw;
  width: 3rem;
  height: 3rem;
  /* border: 1px solid gray; */
}
.plus-mark::before,
.plus-mark::after,
.minus-mark::before,
.minus-mark::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  background-color: #5076d0;
}
.plus-mark::before,
.minus-mark::before {
  padding: 3% 17%;
}
.plus-mark::after {
  padding: 17% 3%;
}
.display-none {
  display: none;
}
.display-height-0 {
  height: 0 !important;
  min-height: 0 !important;
}
.clicked-orange {
  background-color: #ffac00;
  box-shadow: 0px 3px 0px #eda613;
}
.unclicked-gray {
  background-color: #707070;
  box-shadow: 0px 3px 0px #333333;
}
.anchor {
  padding-top: 4rem;
  margin-top: -4rem;
}
.right-arrow-container {
  position: absolute;
  right: 0;
  flex-grow: 0;
}
.right-arrow {
  position: absolute;
  right: 0;
  flex-grow: 0;
  width: 2rem;
  height: 2rem;
  margin: 0.2rem;
  border-radius: 50%;
}
.right-arrow::before {
  content: "→";
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  text-align: center;
}
.right-arrow_standard {
  color: white;
  background-color: var(--ORANGE);
}
.right-arrow_standard-reverse {
  color: var(--ORANGE);
  background-color: white;
}
.right-arrow_entry {
  color: var(--ORANGE);
  background-color: white;
}
.right-arrow_contact {
  color: var(--BLUE);
  background-color: white;
}

.left-arrow-container {
  position: absolute;
  left: 0;
  flex-grow: 0;
}
.left-arrow {
  position: absolute;
  left: 0;
  flex-grow: 0;
  width: 2rem;
  height: 2rem;
  margin: 0.2rem;
  border-radius: 50%;
}
.left-arrow::before {
  content: "←";
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  text-align: center;
}
.left-arrow_contact {
  color: #c9c9c9;
  background-color: white;
}

.box-arrow-container {
  position: absolute;
  right: 0;
  flex-grow: 0;
  width: 2rem;
  height: 2rem;
  margin: 0.2rem;
}
.box-arrow-box {
  position: absolute;

  width: 16px;
  height: 16px;

  border: 1px solid white;

  clip-path: polygon(0 0, 75% 0, 50% 25%, 75% 50%, 100% 25%, 100% 100%, 0 100%);

  border-radius: 5px;

  z-index: 1;
}
.box-arrow-arrow {
  position: absolute;
  top: 6px;
  right: 6px;

  width: 10px;
  height: 10px;

  z-index: 1;
}
.box-arrow-arrow::before,
.box-arrow-arrow::after {
  content: "";
  position: absolute;
}
.box-arrow-arrow::after {
  top: 0;
  left: 0;

  width: calc(100% - 1px * 2);
  height: calc(100% - 1px * 2);

  border: 1px solid white;
  clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
}
.box-arrow-arrow::before {
  right: 0;
  top: 0;

  height: 1px;
  width: calc(100% * 1.4142);

  border-radius: 50vw;
  background-color: white;

  transform-origin: calc(100% - 0.5px) calc(0% + 0.5px);
  transform: rotate(-45deg);
}
.box-arrow-background-color {
  width: 100%;
  height: 100%;
  background-color: var(--ORANGE);
  border-radius: 50vw;
}
.ellipse:hover .box-arrow-box {
  border-color: var(--ORANGE);
}
.ellipse:hover .box-arrow-arrow::after {
  border-color: var(--ORANGE);
}
.ellipse:hover .box-arrow-arrow::before {
  background-color: var(--ORANGE);
}
.ellipse:hover .box-arrow-background-color {
  background-color: white;
}

.ellipse {
  border-radius: 50vw;
  border: var(--BORDERS);
  border-color: var(--BORDER-COLOR);
  background-color: white;

  z-index: 1;
}
.ellipse:hover {
  color: white;
  background-color: var(--ORANGE);
}
.ellipse:hover .right-arrow_standard {
  background-color: white;
  color: var(--ORANGE);
}

.ellipse-opacity {
  border-radius: 50vw;
  border: var(--BORDERS);
  border-color: var(--BORDER-COLOR);
  background-color: white;
}
.ellipse-opacity:hover {
  opacity: 0.5;
}

.ellipse-reverse-color {
  border-radius: 50vw;
  border: var(--BORDERS);
  border-color: var(--BORDER-COLOR);
  background-color: var(--ORANGE);
  color: white;
  border: 0px solid transparent;
}
.ellipse-reverse-color:hover {
  color: var(--ORANGE);
  background-color: white;
  border: 1px solid var(--BORDER-COLOR);
}
.ellipse-reverse-color:hover .right-arrow_standard-reverse {
  background-color: var(--ORANGE);
  color: white;
}
.ellipse-15px {
  border-radius: 15px;
}
.essential {
  flex-grow: 0;
  width: 44px;
  height: 24px;
  margin-left: 0.5rem;
  font-size: 14px;
  color: var(--RED);
  border: 1px solid var(--RED);
  border-radius: 4px;
}
.essential::before {
  content: "必須";
}

.bold {
  font-weight: bold;
}
.font-small {
  font-size: var(--FS-SMALL);
}
.cover-container {
  position: relative;
  justify-content: flex-start;
  width: 100%;
}
.aspect-ratio-2-1 {
  width: 100%;
  padding-top: 25%;
  padding-bottom: 25%;
}
.cover-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-white {
  position: absolute;
  top: 0;
  right: 0;

  width: 100%;
  height: 100%;

  background-color: white;

  transition-delay: 0.2s;
  transition-duration: 1s;
}
.cover-blue {
  position: absolute;
  top: 0;
  right: 0;

  width: 100%;
  height: 100%;

  background-color: var(--BLUE);

  transition-delay: 0.2s;
  transition-duration: 1s;

  z-index: 1;
}
.turn-cover {
  width: 0 !important;
}
.margin-top-zero {
  margin-top: 0;
}

/* || HEADER */
header,
.header__container {
  position: fixed;
  top: 0;
  left: 0;

  justify-content: flex-start;

  width: 100vw;
  height: var(--HEADER-HEIGHT);

  transition: opacity 1s, top 1s;
  z-index: 10010;
}
.header__container {
  top: calc(-1 * var(--HEADER-HEIGHT));
  background-color: white;
  opacity: 0%;
}
.header__logo {
  justify-content: flex-start;
  flex-grow: 0;
  width: 10rem;
  margin-left: 60px;
}
.header__items_container {
  justify-content: flex-end;
  flex-grow: 0;
  height: 100%;
  margin-right: 60px;
  gap: 1rem;

  color: var(--BLUE);
}
.header__entry-logo {
  justify-content: flex-end;
  width: 144px;
  height: 40px;
  margin-left: 1rem;
  color: white;
  background-color: var(--DARK-ORANGE);
  border-radius: 50vw;
  font-size: var(--FS);
}
.header__contact-logo {
  justify-content: flex-end;
  width: 159px;
  height: 40px;
  color: white;
  background-color: var(--BLUE);
  border-radius: 50vw;
  font-size: var(--FS);
  margin-left: 0.7rem;
}
.menu-button {
  width: 40px;
  height: 40px;
  background-color: var(--BLUE);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  position: absolute;
  background-color: white;
  width: 14px;
  height: 1px;
  border-radius: 5px;
}
.menu-icon::before,
.menu-icon::after {
  content: "";
}
.menu-icon::before {
  transform: translate(0, -4px);
}
.menu-icon::after {
  transform: translate(0, 4px);
}
.menu-icon-cross,
.menu-icon-cross::before,
.menu-icon-cross::after {
  position: absolute;
  /* background-color: white; */
  width: 14px;
  height: 1px;
  border-radius: 5px;
}
.menu-icon-cross::before,
.menu-icon-cross::after {
  content: "";
  background-color: #ffffff;
}
.menu-icon-cross::before {
  transform: rotate(45deg);
}
.menu-icon-cross::after {
  transform: rotate(-45deg);
}

/* || MAIN */
/* || MAIN TOP */
.main {
  max-width: var(--MAXWIDTH);
  width: 100vw;
}
.main__top-container {
  background-color: var(--GRAY);
}
.top-img-container {
  flex-wrap: nowrap;
  width: 100vw;
  height: 60vw;
  background-color: var(--BLACK);
}
.main__top-image-1,
.main__top-image-2,
.main__top-image-3,
.main__top-image-4 {
  height: 100%;
  background-size: cover;
}
.main__top-image-1 {
  background-image: url(../img/top-1.png);
}
.main__top-image-2 {
  background-image: url(../img/top-2.png);
}
.main__top-image-3 {
  background-image: url(../img/top-3.png);
}
.main__top-image-4 {
  background-image: url(../img/top-4.png);
}
.main__top-text {
  position: absolute;
  bottom: min(15vw, 192px);

  font-family: "Noto Sans JP", Arial, "ヒラギノ角ゴ Pro W4",
    "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
  color: white;
  font-weight: 900;
  font-size: min(6.25vw, 80px);
}
/* .main__top-text::after {
  content: "ガスの匠、職人が輝く舞台";
} */
.main__work-experience-small-image-container {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 37%;
  margin-right: 3rem;
  margin-bottom: 2rem;
  border-radius: 1vw;
}
.main__work-experience-small-image-container img {
  width: 100%;
  object-fit: cover;
}
.main__work-experience-small-image-container img:nth-child(2) {
  display: none;
}
.main__work-experience-small-image-container:hover img:nth-child(1) {
  display: none;
}
.main__work-experience-small-image-container:hover img:nth-child(2) {
  display: block;
}
.main__text-scroll {
  position: absolute;
  bottom: 20px;
  flex-flow: column;
  color: white;
  font-weight: bold;
}
.main__under-arrow {
  bottom: 0;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border: 3px solid white;
  border-width: 0 0 3px 3px;
  transform: rotate(-45deg);
}

/* || MAIN UPDATE PICKUP */
.main__update-pickup-container {
  align-items: flex-start;
  padding: 5%;
  background-color: var(--GRAY);
}
.main__update {
  flex-flow: column;
  align-items: flex-start;
  width: 50%;
}
.main__update_cover-container {
  margin-bottom: 2rem;
}
.main__update-item {
  flex-wrap: nowrap;
  width: 100%;
}
.main__update-text {
  flex-flow: column;
  align-items: flex-start;
}
.main__update-text-date {
  padding-bottom: 0.5rem;
}
.main__update-text-content {
  text-align: left;
  padding-bottom: 1rem;
  padding-right: 2rem;
}
.main__pickup {
  align-items: flex-start;
  flex-flow: column;
  width: 50%;
  padding-left: 5%;
  /* padding-top: 10vw; */
}
.main__pickup .cover-container:first-child {
  margin-bottom: 2rem;
  width: fit-content;
}
.main__pickup img {
  border-radius: 10px;
  object-fit: cover;
}

.main__work-picture-book-ellipse-container {
  width: 100%;
}
.main__work-picture-book-ellipse {
  position: absolute;
  top: -22.5px;
  width: 15rem;
  height: 45px;
}

/* || MAIN ABOUT */
.main__about {
  flex-flow: row;
  padding-top: 12%;
  padding-bottom: 12%;
}
.main__about-img-container {
  width: 100%;
}
.main__about-img-container .cover-container {
  justify-content: flex-start;
}
.main__about-img-container .cover-container img {
  width: 100%;
}
.main__about-explain-container {
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  padding-left: 5%;
  gap: 2rem;
}
.about-explain {
  flex-flow: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.main__about-ellipse-container {
  width: 35%;
  height: 40px;
}
.main__about-ellipse {
  height: 40px;
}

/* || MAIN SERVICE */
.main__service {
  flex-flow: column;
  background-color: var(--GRAY);
  padding-bottom: 5%;
}
.main__service_cover-container {
  margin-bottom: 3%;
}
.main__service-links {
  width: 80%;
  gap: 3%;
}
.main__service-img-relative-container {
  width: 30%;
  padding-top: 11.25%;
  padding-bottom: 11.25%;
  margin-bottom: 5%;
}
.main__service-img-container {
  position: absolute;
  flex-flow: column;
  top: 2rem;
  height: 100%;
  opacity: 0%;
  transition: opacity 1s, top 1s;
}
.main__service-img-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  border-radius: 10px;
  background-color: white;
  opacity: 1;
}
.main__service-img-container img {
  width: 100%;
  max-width: 100%;
  border-radius: 50vw;
  z-index: 1;
}
.main__service-img-container p {
  z-index: 1;
}
.main__service-ellipse {
  width: 12rem;
  height: 50px;
}

/* || MAIN RECRUIT */
.main__recruit {
  flex-flow: column;
  padding: 10%;
}
.main__recruit-links {
  width: 100%;
  gap: 1.5rem;
  padding-top: 1.5rem;
}
.main__recruit-link {
  flex-grow: 0;
  width: 30%;
  height: 56px;
}

/* || MAIN INSTAGRAM */
.main__instagram {
  flex-flow: column;
  width: 90%;
}
.main__instagram-images {
  width: 100%;
  padding-top: 4%;
}
.main__instagram_image-container {
  width: 25%;
  padding-top: 12.5%;
  padding-bottom: 12.5%;
}
.main__instagram-image {
  position: absolute;
  border-radius: 5%;
  top: 2rem;
  width: 90%;
  padding: 45% 0;

  overflow: hidden;

  opacity: 0%;
  transition: opacity 1s, top 1s;
}
.main__instagram-image img {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}
.main__instagram-link {
  width: 12rem;
  height: 40px;
}

/* || MAIN WORK EXPERIENCE */
.main__work-experience-img-container {
  flex-flow: column;
  opacity: 0;
  top: 2rem;
  margin-top: 8%;
  transition: opacity 1s, top 1s;
}
.main__work-experience-img-container img {
  width: 100%;
}
.main__work-experience-img-people {
  width: 50%;
  padding-top: 3rem;
}
.main__work-experience-img-bubble {
  position: absolute;
  width: 68%;
  top: 0;
}
.main__work-experience-text {
  flex-flow: column;
  width: 65%;
  height: 0;
  padding-top: 8.0625%;
  padding-bottom: 8.0625%;

  border-radius: 9px;
  background-color: var(--ORANGE);
  box-shadow: 0px 0.8vw 0px var(--DARK-ORANGE);

  order: 1;
}
.main__work-experience-text:hover {
  top: 0.8vw;
  box-shadow: 0px 0vw 0px var(--DARK-ORANGE);
}
.main__work-experience-text:hover + .main__work-experience-img-people {
  top: 0.8vw;
  box-shadow: 0px 0vw 0px var(--DARK-ORANGE);
}
.bubble-animation {
  animation: moveUpDown 5s ease-in-out;
}
@keyframes moveUpDown {
  0% {
    transform: translateY(2rem);
  }
  15% {
    transform: translateY(-1.5rem);
  }
  30% {
    transform: translateY(1.1rem);
  }
  45% {
    transform: translateY(-0.84rem);
  }
  60% {
    transform: translateY(0.47rem);
  }
  75% {
    transform: translateY(-0.36rem);
  }
  90% {
    transform: translateY(0.27rem);
  }
  100% {
    transform: translateY(0);
  }
}

/* || CIRCLE BACKGROUND */
.bottom-circle-background-container {
  width: 100%;
  height: 0;
  padding: 7.5%;
  overflow: hidden;
  background-color: #ffffff;
}
.bottom-circle-background {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  padding: 100%;
  border-radius: 50%;
  background-color: #f3f4f4;
  z-index: 1;
}

/* || MAIN OFFICE */
.main__office-container {
  width: 100%;
  padding: 5%;
  padding-bottom: 3%;
  background-color: var(--GRAY);
  z-index: 1;
}
.main__office-limitter-container {
  flex-flow: column;
  align-items: flex-start;
  width: 90%;
}
.main__company-logo2 {
  justify-content: flex-start;
}
.main__office-osaka-tokyo-container {
  width: 100%;
  flex-wrap: nowrap;
  margin-top: 2%;
}
.main__company-osaka-google-map,
.main__company-tokyo-google-map {
  width: 50%;
  padding-top: 16.5%;
  padding-bottom: 16.5%;
}
.main__company-osaka-google-map iframe,
.main__company-tokyo-google-map iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}
.main__office-osaka-explain,
.main__office-tokyo-explain {
  align-items: flex-start;
  flex-flow: column;
  margin-left: 1rem;
}
.main__office-osaka-explain p,
.main__office-tokyo-explain p {
  text-align: left;
}
.main__google-map-link {
  justify-content: flex-end;
  width: 15rem;
  height: 52px;
}

/* || FOOTER */
footer {
  flex-flow: column;
  background-color: var(--GRAY);
  /* margin-top: 10%; */
}
.footer__container {
  align-items: flex-start;
  width: 90%;
  padding-top: 3%;
  border-top: var(--BORDERS);
  /* z-index: 3; */
}
.footer__lists {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  width: 60%;
}
footer ul li {
  font-size: var(--FS-SMALL);
}
.footer__entry-contact-container {
  flex-flow: column;
  align-items: flex-end;
  width: 40%;
}
.footer__entry-container,
.footer__contact-container {
  width: 100%;
  color: white;
  border-radius: 10px;
  margin-bottom: 1rem;
  flex-wrap: nowrap;
}
.footer__entry-container {
  background-color: var(--ORANGE);
  box-shadow: 0px 2px 0px var(--DARK-ORANGE);
}
.footer__entry-container:hover {
  top: 2px;
  box-shadow: 0px 0px 0px var(--DARK-ORANGE);
}
.footer__contact-container {
  background-color: var(--BLUE);
  box-shadow: 0px 2px 0px var(--DARK-BLUE);
}
.footer__contact-container:hover {
  top: 2px;
  box-shadow: 0px 0px 0px var(--DARK-BLUE);
}
.footer__entry-img-container,
.footer__contact-img-container {
  flex-grow: 0;
  justify-content: flex-start;
  background-color: transparent;
}
.footer__entry-container img,
.footer__contact-container img {
  height: 80px;
  border-radius: 45px;
  border-top-right-radius: 50vw;
  border-bottom-right-radius: 50vw;
}
.footer__button-text-container p {
  margin: 0 auto;
}
.footer__button-text-container p:nth-child(2) {
  padding-right: 10%;
  margin-left: 0;
}

/* FONTS  */
.header-font-small {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 12px;
}
.header-font-large {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.header-font-button {
  flex-flow: column;
  padding-right: 3px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 15px;
  padding-right: 0.7rem;
}
.header-font-button span {
  font-size: 11px;
  line-height: 15px;
}
.header-font-button span span {
  font-size: 15px;
}
.update-date-font {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 14px;
}
.ellipse {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
}

.main__service-links {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 20px;
}
.main__service-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 18px;
}
.main__recruit-link-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0px;
}

.main__work-experience-text p:nth-child(1) {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}
.main__work-experience-text p:nth-child(2) {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}
.main__office-container p {
  padding-bottom: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0px;
  color: #333333;
  opacity: 1;
}
footer ul {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0px;
  color: #333333;
  opacity: 1;
}
footer li {
  padding-top: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0px;
  color: #333333;
  opacity: 1;
}
.footer__entry-contact-container p:nth-child(1) {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}

.footer__entry-contact-container p:nth-child(2) {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}

/* || FOR ABOUT */
#philosophy {
  width: 100%;
  flex-flow: column;
}
.about__philosophy-container {
  flex-flow: column;
}
.about__main-background-img-container {
  position: absolute;
  top: 0;
  background-image: url(../img/about-background-img.png);
  width: 100%;
  height: 20%;
  background-size: cover;
}

.about__main-title-container {
  width: fit-content;
  margin-top: 7vw;
}

.semicircle-container {
  position: absolute;
  top: 10rem;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.semicircle-window {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  padding-top: 100%;
}
.circle-background {
  position: absolute;
  top: 5rem;
  left: -50%;
  width: 0%;
  height: 0%;
  padding: 100%;
  border-radius: 50%;
  background-color: #ffffff;
}

.about__philosophy-container {
  width: 65%;
  padding-top: 13vw;
}
.about__philosophy-sub-title-container {
  padding-top: 1rem;
}
.about__philosophy-text-container {
  width: 100%;
  padding-top: 2rem;
  z-index: 1;
}
.about__philosophy-text {
  display: block;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: left;
}
.about__president-img-container {
  float: right;
  width: 30%;
  object-fit: cover;
  margin-top: 0.4rem;
  margin-left: 2rem;
  border-radius: 10px;
}
.aspect-ratio-president {
  width: 100%;
  padding-top: 53.6%;
  padding-bottom: 53.6%;
}
.about__philosophy-sign-container {
  justify-content: flex-end;
  width: 100%;
  margin-top: 2rem;
}
.about__philosophy-sign-text {
  flex-grow: 0;
  margin-left: auto;
  margin-right: 0;
  text-align: left;
}
.about__philosophy-sign-container img {
  width: 20%;
  margin-left: 1rem;
}
.about__about-container {
  flex-flow: column;
  width: 75%;
  padding-top: 5rem;
  padding-bottom: 3rem;
  margin-top: 7rem;
  margin-bottom: 3rem;
  background-color: #ffffff;
  border: 1px solid var(--BORDER-COLOR);
  border-radius: 10px;
  z-index: 1;
  border-radius: 10px;
}
.about__about-internal-outline {
  flex-flow: column;
  width: 90%;
  padding-top: 3rem;
}
.about__about-name-container {
  width: 80%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-bottom: 1px solid var(--BORDER-COLOR);
}
.about__about-name-container div {
  justify-content: flex-start;
  text-align: left;
}
.about__about-name-container div:nth-child(1) {
  width: 30%;
}
.about__about-name-container div:nth-child(2) {
  width: 70%;
}
.about__about-company-imgs-container {
  width: 80%;
}
.about__about-company-img-container {
  width: 50%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.about__about-company-img-name {
  justify-content: flex-start;
}
.about__about-company-img-size-container {
  width: 100%;
  padding-top: 30%;
  padding-bottom: 30%;
  margin-top: 0.5rem;
}
.about__about-company-img-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* background bubble settings */
.about__philosophy-background-bubble,
.about__about-background-bubble-top,
.about__aoubt-background-bubble-bottom {
  position: absolute;
  background-size: cover;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 1s;
}
.about__philosophy-background-bubble {
  top: 20%;
  left: -5%;
  width: 35%;
  padding: 18.7% 0;
  background-image: url(../img/about-background-bubble1.png);
}
.about__about-background-bubble-top {
  top: 37%;
  right: -15%;
  width: 40%;
  padding: 21.22% 0;
  background-image: url(../img/about-background-bubble2.png);
  z-index: -1;
}
.about__aoubt-background-bubble-bottom {
  bottom: 19%;
  left: -5%;
  width: 35%;
  padding: 17.82% 0;
  background-image: url(../img/about-background-bubble3.png);
}

/* || FONTS FOR ABOUT */
.about__main-title {
  font-family: sans-serif;
  font-weight: 600;
  font-size: 60px;
  letter-spacing: 0px;
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  opacity: 1;
}
.about__philosophy-title {
  font-family: sans-serif;
  font-weight: 800;
  font-size: 44px;
  letter-spacing: 0px;
  color: transparent;
  -webkit-text-stroke: 1px var(--BLUE);
  opacity: 1;
}
.about__philosophy-sub-title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0px;
  color: var(--BLACK);
  opacity: 1;
}
.about__philosophy-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 00;
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 28px;
  color: var(--BLACK);
  opacity: 1;
}
.about__about-title {
  font-family: sans-serif;
  font-weight: 800;
  font-size: 44px;
  letter-spacing: 0px;
  color: transparent;
  -webkit-text-stroke: 1px var(--BLUE);
  opacity: 1;
}

.footer__lists p:hover,
.footer__lists li:hover {
  opacity: 0.5;
}
.header__items_container a:hover {
  opacity: 0.5;
}
.header__entry-logo:hover,
.header__contact-logo:hover {
  opacity: 0.5;
}
/* || FOR contact */
.main__view-hidden-container {
  flex-flow: column;
}
.contact__main-background-img-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 500px;
  background-image: url(../img/contact-top-background.png);
  background-size: cover;
}
.contact__main-title-container {
  margin-top: 5%;
  width: fit-content;
  height: fit-content;
}
.contact__work-experience-container {
  flex-flow: column;
  width: 65%;
  padding-top: 13vw;
}
.about__contact-work-experience-img-container {
  width: 100%;
  margin-top: 5%;
  margin-bottom: 5%;
}
.about__contact-work-experience-img-size-container {
  width: 100%;
  padding-top: 17.05%;
  padding-bottom: 17.05%;
}
.about__contact-work-experience-img-container img {
  position: absolute;
  width: 100%;
  object-fit: cover;
}
.contact__work-experience-title-container {
  margin-top: 10%;
  margin-bottom: 3%;
}
.contact__work-experience-buttons-container {
  width: 100%;
  background-color: #ffffff;
  z-index: 1;
  gap: 2rem;
  margin-top: 5%;
}

.contact__work-experience-button-container {
  flex-flow: column;
  width: 30%;
  height: 102px;

  border: 2px solid var(--BORDER-COLOR);
  border-radius: 10px;
}
.contact__work-experience-button-container:hover {
  opacity: 0.5;
}
.contact__work-experience-button-text {
  margin-top: 0.8rem;
}
.contact__work-experience-button-icon-container {
  margin-bottom: 0.8rem;
}

.contact__work-experience-container > img {
  margin-top: 3%;
  margin-bottom: 3%;
  z-index: 1;
}

.contact__work-experience-button-icon-container-phone-img {
  width: 18px;
}
.contact__work-experience-button-icon-container-mail-img {
  width: 45px;
}
.contact__work-experience-button-icon-container-line-img {
  width: 40px;
}
.contact__contact-container {
  flex-flow: column;
  width: 65%;
  padding-top: 10%;
  margin-top: 10%;
  border-top: 1px solid var(--BORDER-COLOR);
}
.contact__contact-title-cover-container {
  margin-bottom: 10%;
}
.contact__contact-inputs-container {
  align-items: flex-start;
  flex-flow: column;
  width: 100%;
  row-gap: 1.5rem;
}
.contact__contact-inputs-container input {
  height: 41px;
}
.contact__contact-input-container {
  justify-content: flex-start;
  width: 100%;
}
.contact__contact-input-title {
  justify-content: flex-start;
  width: 30%;
}
.contact__contact-input-title-detail {
  justify-content: flex-start;
  margin-top: 8px;
  margin-bottom: auto;
  width: 30%;
  height: 100%;
}
.contact__contact-input-input {
  justify-content: flex-start;
  width: 70%;
}
.contact__contact-input-input-box-year,
.contact__contact-input-input-box-month,
.contact__contact-input-input-box-day {
  margin-right: 0.5rem;
}
.contact__contact-input-input-box-month,
.contact__contact-input-input-box-day {
  margin-left: 1rem;
}
.contact__contact-input-textbox {
  width: 100%;
  height: 247px;
}
input,
textarea {
  margin: 0;
  border: 1px solid var(--BORDER-COLOR);
  border-radius: 10px;
}
textarea {
  resize: none;
}
input:not([type]),
textarea {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
input[type="radio"] {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--BORDER-COLOR);
  border-radius: 50%;
  background-color: #ffffff;
}
input[type="radio"]:before {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;
  border-radius: 50%;
}
input[type="radio"]:checked:before {
  background: #333333;
}

input[type="checkbox"] {
  width: 24px;
  height: 24px;
  border: 1px solid var(--BORDER-COLOR);
  border-radius: 9px;
  background-color: #ffffff;
  -webkit-appearance: none;
}
input[type="checkbox"]:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
}
input[type="checkbox"]:checked:before {
  content: "";
  margin-top: 2px;
  margin-left: 7px;
  width: 4px;
  height: 12px;
  border-right: 3px solid #333333;
  border-bottom: 3px solid #333333;
  transform: rotate(45deg);
}

.contact__contact-input-input-box {
  width: 100%;
}
.contact__contact-input-input-box-year {
  width: 100px;
}
.contact__contact-input-input-box-month {
  width: 40px;
}
.contact__contact-input-input-box-day {
  width: 40px;
}
.contact__contact-privacy-policy-container {
  align-items: flex-start;
  flex-flow: column;
  width: 100%;
}
.contact__contact-privacy-policy-container textarea {
  width: 100%;
  height: 298px;
}
.contact__contact-privacy-policy-title {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.contact__contact-agree-container {
  align-self: flex-start;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.contact__agree-container {
  display: none;
  flex-flow: column;
  margin: 6rem auto;
}
.contact__agree-container-confirm-view {
  flex-flow: column;
  width: 65%;
}
.contact__send-complete-container {
  position: relative;
  display: none;
  flex-flow: column;
  width: 60%;
  padding-bottom: 6rem;
  margin: 6rem auto;
  margin-bottom: 20rem;
}
.contact__send-complete-title {
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
  font-size: 44px;
  font-weight: 500;
  border-bottom: 1px solid #707070;
}
.contact__send-complete-text {
  margin-bottom: 3rem;
  line-height: 2rem;
}
.contact__send-complete-container .complete-bubble-position-1 {
  inset: auto;
  top: 0%;
  right: -50%;
}
.contact__send-complete-container .complete-bubble-position-2 {
  inset: auto;
  top: 50%;
  left: -50%;
}
/* || FONTS FOR contact */
.contact__main-title {
  font-family: sans-serif;
  font-weight: 600;
  font-size: 60px;
  letter-spacing: 0px;
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  opacity: 1;
}
.contact__work-experience-before-entry {
  position: absolute;
  top: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0px;
  color: var(--BLUE);
  opacity: 0;

  transition-delay: 0.2s;
  transition-duration: 1s;
}
.contact__work-experience-title {
  font-family: sans-serif;
  font-weight: 800;
  font-size: 44px;
  letter-spacing: 0px;
  color: transparent;
  -webkit-text-stroke: 1px var(--BLUE);
  opacity: 1;
}
.wait-2s {
  transition-delay: 2s;
  transition-duration: 1s;
}
.contact__work-experience-explain {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 28px;
  color: var(--BLACK);
  opacity: 1;
}
.contact__work-experience-application-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0px;
  line-height: 28px;
  color: var(--BLACK);

  margin-top: 5%;
  padding-left: 1rem;
  padding-right: 1rem;
}
.contact__work-experience-application-text::before,
.contact__work-experience-application-text::after {
  content: "";
  position: absolute;
  height: 1.5rem;
  width: 3px;
  background-color: var(--BLACK);
}
.contact__work-experience-application-text::before {
  left: -1rem;
  left: 0;
  transform: rotate(-17deg);
}
.contact__work-experience-application-text::after {
  right: -0.6rem;
  right: 0;
  transform: rotate(17deg);
}
.contact__work-experience-button-container {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 28px;
  color: var(--BLACK);
  opacity: 1;
}
.phone-number {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0px;
  line-height: 28px;
  color: var(--BLACK);
  opacity: 1;
}

.contact__contact-title {
  font-family: sans-serif;
  font-weight: 800;
  font-size: 44px;
  letter-spacing: 0px;
  color: transparent;
  -webkit-text-stroke: 1px var(--BLUE);
  opacity: 1;
}
.contact__contact-input-title,
.contact__contact-input-input,
.contact__contact-input-title-detail,
.contact__contact-privacy-policy-title,
.contact__confirm-item {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 28px;
  color: var(--BLACK);
  opacity: 1;
}
.contact__contact-privacy-policy-title {
  font-size: 18px;
}
.contact__contact-privacy-policy-textbox {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 42px;
  padding-left: 1rem;

  color: var(--BLACK);
  opacity: 1;
}
.contact__contact-agree-checkbox {
  margin-right: 1rem;
}
.contact__contact-agree-check-view {
  position: relative;
  height: 22px;
}
.contact__contact-agree-check-view::before {
  content: "";
  margin-top: -1px;
  margin-right: 1rem;
  margin-left: 7px;
  width: 4px;
  height: 12px;
  border-right: 3px solid #333333;
  border-bottom: 3px solid #333333;
  transform: rotate(45deg);
}

.contact__confirm {
  width: 288px;
  height: 56px;
}
.contact__confirm-button-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0px;
  opacity: 1;
}
.contact__agree-button-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0px;
  opacity: 1;
}
.contact__send-button-container,
.contact__back-button-container,
.contact__top-back-button-container {
  width: 288px;
  height: 56px;
  margin: 0.5rem auto;
  cursor: pointer;
}
.contact__top-back-button-container {
  background-color: white;
  color: #333333;
  border: 1px solid var(--BORDER-COLOR);
}
.contact__back-button-container {
  background-color: #c9c9c9;
  color: white;
}
.contact__back-button-container:hover {
  background-color: white;
  color: #c9c9c9;
}
.contact__back-button-container:hover .left-arrow {
  background-color: #c9c9c9;
  color: white;
}

/* background bubble settings */
.contact__work-experience-background-bubble,
.contact__contact-background-bubble-top,
.contact__contact-background-bubble-middle,
.contact__contact-background-bubble-bottom {
  position: absolute;
  background-size: cover;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 1s;

  z-index: 0;
}
.contact__work-experience-background-bubble {
  position: absolute;
  top: 40%;
  right: -35%;
  width: 55%;
  padding: 29.84% 0;
  margin-top: 0;
  background-image: url(../img/contact-background-bubble-1.svg);
}
.contact__contact-background-bubble-top {
  position: absolute;
  top: -0%;
  left: -45%;
  width: 55%;
  padding: 28.64% 0;
  margin-top: 0;
  background-image: url(../img/contact-background-bubble-2.svg);
  z-index: -1;
}
.contact__contact-background-bubble-middle {
  position: absolute;
  bottom: 10%;
  right: -40%;
  width: 55%;
  padding: 29.6% 0;
  margin-bottom: 0;
  background-image: url(../img/contact-background-bubble-3.svg);
}
.contact__contact-background-bubble-bottom-container {
  position: absolute;
  bottom: -8%;
  left: -46%;
  width: 45%;
  padding: 22.5% 0;
  margin-bottom: 0;
}
.contact__contact-background-bubble-bottom {
  width: 100%;
  height: 100%;
  background-image: url(../img/contact-background-bubble-4.svg);
}
.confirm-bubble-position-1 {
  inset: auto;
  right: -40%;
  top: 5%;
}
.confirm-bubble-position-2 {
  inset: auto;
  left: -45%;
  bottom: -5%;
}

.contact__confirm-item {
  text-align: left;
  justify-content: flex-start;
  width: 60%;
}
.footer__view-hidden-container {
  flex-flow: column;
  width: 100%;
}

/* || FOR reCAPTCHA */
.recaptcha_policy {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 11px !important;
  color: #444 !important;
}
.recaptcha_policy a {
  font-size: 11px !important;
  color: #111 !important;
}
.grecaptcha-badge {
  visibility: hidden;
}
.g-recaptcha {
  display: flex;
  align-items: center;
  width: 288px;
  height: 56px;

  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* || FOR SERVICE */
.service__main-background-img-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 500px;
  background-image: url(../img/service-top-background.png);
  background-size: cover;
}
.service__main-title-container {
  margin-top: 5%;
  width: fit-content;
  height: fit-content;
}
.service__main-title-container {
  margin-top: 5%;
  width: fit-content;
  height: fit-content;
}
.service__service-list-container {
  flex-flow: column;
  width: 65%;
  padding-top: 13vw;
}
.service__service-list-container > img {
  margin-top: 3%;
  margin-bottom: 3%;
  z-index: 1;
}
.service__sub-title-container {
  margin-top: 10%;
  margin-bottom: 3%;
}
.service__sub-title-cover-container {
  flex-grow: 0;
}
.service__service-button-list-container {
  width: 100%;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  z-index: 1;
}
.service__service-button-item {
  height: 80px;
  border-radius: 10px;
  background-color: var(--BLUE);
  color: #ffffff;
  font-weight: 500;
}
.service__work-picture-book-explain-text {
  flex-flow: column;
  font-weight: 500;
  line-height: 2rem;
}
.service__work-picture-book-container {
  flex-flow: column;
  width: 65%;
  margin-bottom: 10rem;
}
.service__service-which-one-container {
  flex-flow: column;
  width: 100%;
  z-index: 1;
}
.service__service-which-one-both-img-container,
.service__service-which-one-construction-container,
.service__service-which-one-office-work-container {
  align-items: flex-start;
  width: 100%;
  gap: 3rem;
}
.service__service-which-one-both-img-container {
  align-items: flex-end;
  color: #ffffff;
  font-size: 32px;
  font-weight: 600;
}
.service__service-which-one-both-img-container img:first-of-type {
  width: 80%;
}
.service__service-which-one-both-img-container > div,
.service__service-which-one-construction-container > div,
.service__service-which-one-office-work-container > div {
  width: 40%;
  margin-top: 3rem;
}
.service__service-which-one-container img {
  width: 100%;
  object-fit: cover;
}

.service__service-which-one-construction-container img,
.service__service-which-one-office-work-container img {
  position: absolute;
  border-radius: 50vw;
}

.service__service-button-construction,
.service__service-button-office-work {
  width: 100%;
  height: 108px;
  border-radius: 10px;
}
.service__service-button-construction,
.service__service-button-office-work {
  cursor: pointer;
}
.service__service-button-construction:hover,
.service__service-button-office-work:hover {
  opacity: 0.5;
}
.service__service-which-one-child-container {
  flex-flow: column;
  margin-top: 0.8rem;
  background-color: #ffffff;
  border-radius: 10px;
}
.service__service-which-one-child-title {
  font-weight: 500;
}
.service__service-which-one-child-title::before {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  width: 3rem;
  border-bottom: 1px solid #ffac00;
}
.service__service-which-one-child-text {
  align-content: flex-start;
  width: 80%;
  height: 6.2rem;
  padding-top: 1rem;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 400;
}
.service__service-which-one-construction-container > div,
.service__service-which-one-office-work-container > div {
  border-radius: 10px;
  box-shadow: 0px 2px 0px #0000001c;
  background-color: #ffffff;
  border-top-left-radius: 50vw;
  border-top-right-radius: 50vw;
}
.service__intaview-container {
  background-color: #f3f4f4;
  z-index: 2;
}
.service__sub-title-position-container {
  position: absolute;
  top: -4.2rem;
  z-index: 1;
}

.service__main-title {
  font-family: sans-serif;
  font-weight: 600;
  font-size: 60px;
  letter-spacing: 0px;
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  opacity: 1;
}
.service__service-which-one-title-container {
  width: 100%;
  height: 3rem;
  margin-top: 3rem;
}
.service__service-which-one-title {
  position: absolute;
  top: 0;

  margin-top: 5rem;
  margin-bottom: 2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0px;
  color: var(--BLUE);
  opacity: 0;

  color: var(--BLUE);
  opacity: 0;

  transition-delay: 0.2s;
  transition-duration: 1s;
}
.service__sub-list-title {
  font-family: sans-serif;
  font-weight: 800;
  font-size: 44px;
  letter-spacing: 0px;
  color: transparent;
  -webkit-text-stroke: 1px var(--BLUE);
  opacity: 1;
}

.column-direction {
  flex-flow: column;
}

.slider-container {
  width: 100%;
  padding: 17.86% 0;
  margin-bottom: 3rem;
  background-color: #f3f4f4;
}
.absolute-100-100 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.view-window {
  overflow: hidden;
  flex-grow: 0;
  width: 65%;
  height: 100%;
}
.view-window > div {
  position: absolute;
  width: 28%;
  padding: 19% 0;
  object-fit: cover;
}
.view-window img {
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}
.left-arrow-button {
  position: absolute;
  left: 100px;
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50vw;
  cursor: pointer;
}
.left-arrow-button::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-left: 7px;
  border-bottom: 3px solid #707070;
  border-right: 3px solid #707070;
  transform: rotate(135deg);
}
.right-arrow-button {
  position: absolute;
  right: 100px;
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 50vw;
  cursor: pointer;
}
.right-arrow-button::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-right: 7px;
  border-bottom: 3px solid #707070;
  border-right: 3px solid #707070;
  transform: rotate(-45deg);
}
.slider-pos-1:hover,
.slider-pos-2:hover,
.slider-pos-3:hover,
.slider-pos-4:hover,
.slider-pos-5:hover,
.slider-pos-6:hover,
.slider-pos-7:hover,
.slider-pos-8:hover,
.slider-pos-9:hover {
  opacity: 0.5;
}
.slider-pos-1 {
  left: calc(0.36 * -300%);
  transition: left 0s;
}
.slider-pos-2 {
  left: calc(0.36 * -200%);
  transition: left 0s;
}
.slider-pos-3 {
  left: calc(0.36 * -100%);
  transition: left 0.5s;
}
.slider-pos-4 {
  left: calc(0.36 * 0%);
  transition: left 0.5s;
}
.slider-pos-5 {
  left: calc(0.36 * 100%);
  transition: left 0.5s;
}
.slider-pos-6 {
  left: calc(0.36 * 200%);
  transition: left 0.5s;
}
.slider-pos-7 {
  left: calc(0.36 * 300%);
  transition: left 0.5s;
}
.slider-pos-8 {
  left: calc(0.36 * 400%);
  transition: left 0s;
}
.slider-pos-9 {
  left: calc(0.36 * 500%);
  transition: left 0s;
}
.slider-none {
  display: none;
  visibility: hidden;
  width: 0;
}

.service__comment,
.service__specialty,
.service__name {
  position: absolute;
  user-select: none;
}
.service__comment {
  top: 6%;
  left: 10%;
  text-align: left;
  writing-mode: vertical-rl;
  color: #ffffff;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 1px;
  line-height: 1.4rem;
}
.service__specialty {
  left: 5%;
  bottom: 2%;
  height: 8%;
  padding: 0 0.8rem;
  font-size: 11px;
  font-weight: 400;
  color: #ffffff;
  background-color: #5076d0;
  border-radius: 50vw;
  z-index: 1;
}
.service__name {
  justify-content: flex-start;
  bottom: -12%;
  left: 0%;
  width: 75%;
  height: 18%;
  padding-left: 0.8rem;
  text-align: left;
  font-size: 11px;
  background-color: #ffffff;
  box-shadow: 0px 3px 0px #0000001c;
  border-radius: 10px;
}
.font-big {
  font-size: 16px;
  font-weight: 500;
  margin-left: 0.5rem;
}

.service__background-bubble-container {
  width: 100%;
}
.service__background-little-bubble,
.service__background-bubble-1,
.service__background-bubble-2,
.service__background-bubble-3,
.service__background-bubble-4 {
  position: absolute;
  margin-top: 0;
  background-size: cover;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 1s;
}

.service__background-little-bubble {
  top: 2rem;
  width: 50%;
  padding: 3.3% 0;
  margin-top: 3.3rem;
  background-image: url(../img/service-little-bubble.png);

  opacity: 0;
  transition: opacity 1s, top 1s;
}
.service__background-bubble-1 {
  top: -100px;
  right: 0;
  width: 30%;
  padding: 20% 0;
  background-image: url(../img/service-background-bubble-1.png);
}
.service__background-bubble-2 {
  bottom: 200px;
  left: -12%;
  width: 35%;
  padding: 18.22% 0;
  background-image: url(../img/service-background-bubble-2.png);
}
.service__background-bubble-3 {
  top: -300px;
  right: -8%;
  width: 30%;
  padding: 16.13% 0;
  background-image: url(../img/service-background-bubble-3.png);
}
.service__background-bubble-4 {
  top: -250px;
  left: -12%;
  width: 30%;
  padding: 15% 0;
  background-image: url(../img/service-background-bubble-4.png);
  z-index: 1;
}

/* || FOR RECRUIT */
.recruit__main-background-img-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 500px;
  background-image: url(../img/recruit-top-background-img.png);
  background-size: cover;
}
.recruit__applicant-guideline-container {
  flex-flow: column;
  width: 100%;
}
.recruit__work-panel-container {
  flex-flow: column;
  width: 80%;
  padding: 5% 0 3% 0;
  background-color: #ffffff;
  border: 1px solid #c9c9c9;
  border-radius: 10px;
}
.recruit__work-panel-tokyo-container,
.recruit__work-panel-osaka-container {
  top: 2rem;
  width: 100%;
  height: 40%;
  padding: 3% 0;
  gap: 2%;

  opacity: 0%;
  transition: opacity 1s, top 1s;
}
.recruit__work-panel {
  flex-flow: column;
  flex-grow: 0;
  width: 0;
  height: 0;
  padding: 13%;
  background-color: #ffffff;
  border: 1px solid #c9c9c9;
  border-radius: 10px;
}
.recruit__work-panel::before {
  content: "";
  position: absolute;
  top: 17%;
  content: "";
  width: 85%;
  border: 0.5px solid var(--BORDER-COLOR);
}
.recruit__work-panel-sub-title {
  font-size: 26px;
  font-weight: 500;
}
.recruit__work-panel-title,
.recruit__work-panel-status,
.recruit__work-panel-block-text,
.recruit__work-panel-condition {
  position: absolute;
  left: 7.5%;
  justify-content: flex-start;
  text-align: left;
}

.recruit__work-panel-title {
  top: 6%;
  font-size: 18px;
  font-weight: 500;
}
.recruit__work-panel-status {
  top: 19%;
}
.recruit__work-panel-block-text {
  top: 29%;
  align-self: flex-start;
  padding: 0 2%;
  border: 1px solid var(--BORDER-COLOR);
  border-radius: 4px;
}
.recruit__work-panel-condition {
  top: 44%;
}
.recruit__work-panel-button {
  top: 73%;
  position: absolute;
  width: 85%;
  height: 16%;
  cursor: pointer;
}

.recruit__entory-button {
  width: 30%;
  padding: 1.5% 0;
  background-color: #fdbf3f;
  box-shadow: 0px 3px 0px #eda613;
  border-radius: 10px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 400;
  margin: 4rem 0 10rem 0;
}
.recruit__entory-button:hover {
  top: 3px;
  box-shadow: 0px 0px 0px #eda613;
}

.recruit__individual-interview-container {
  width: 100%;
  margin-top: 8rem;
  margin-bottom: 8rem;
  flex-flow: column;
  gap: 2.5rem;
}
.recruit__individual-interview {
  width: 65%;
}
.recruit__individual-interview-top {
  width: 100%;
  height: 100%;
}
.recruit__individual-interview-top-text-container {
  position: absolute;
  flex-flow: column;
  align-items: flex-start;
  padding: 5%;
  left: 0;
}
.recruit__individual-interview-top-text,
.recruit__individual-interview-top-profile {
  text-align: left;
  font-weight: 400;
  color: #ffffff;
  z-index: 1;
}
.recruit__individual-interview-top-text {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 0.2rem;
}
.recruit__individual-interview-top-profile {
  font-size: 16px;
}
.recruit__individual-interview-top-background-img-1,
.recruit__individual-interview-top-background-img-2,
.recruit__individual-interview-top-background-img-3,
.recruit__individual-interview-top-background-img-4,
.recruit__individual-interview-top-background-img-5 {
  width: 100%;
  padding: 16.9% 0;
  background-size: cover;
  border-radius: 10px 10px 0 0;
}
.recruit__individual-interview-top-background-img-1 {
  background-image: url(../img/recruit__individual-interview-top-background-img-1.png);
}
.recruit__individual-interview-top-background-img-2 {
  background-image: url(../img/recruit__individual-interview-top-background-img-2.png);
}
.recruit__individual-interview-top-background-img-3 {
  background-image: url(../img/recruit__individual-interview-top-background-img-3.png);
}
.recruit__individual-interview-top-background-img-4 {
  background-image: url(../img/recruit__individual-interview-top-background-img-4.png);
}
.recruit__individual-interview-top-background-img-5 {
  background-image: url(../img/recruit__individual-interview-top-background-img-5.png);
}
.recruit__individual-interview-body {
  display: block;
  width: 100%;
  padding: 7.5%;
  text-align: left;
  border: 1px solid var(--BORDER-COLOR);
  border-radius: 10px;
  margin-top: -10px;
  background-color: #ffffff;
  font-size: 14px;
}
.recruit__individual-interview-body div {
  justify-content: flex-start;
  text-align: left;
}
.recruit__individual-interview-image {
  float: left;
  width: 50%;
  height: 50%;
  margin: 0 3% 3% 0;
}
.recruit__individual-interview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.recruit__individual-interview-body-subtitle {
  color: #5076d0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
}
.recruit__work-environment-container {
  flex-flow: column;
  width: 65%;
}
.recruit__work-environment-img-container {
  align-items: flex-start;
  width: 100%;
  margin-top: 4rem;
  margin-bottom: 6rem;
  gap: 5%;
}
.recruit__work-environment-img-1,
.recruit__work-environment-img-2,
.recruit__work-environment-img-3,
.recruit__work-environment-img-4,
.recruit__work-environment-img-5 {
  top: 2rem;
  width: 0;
  height: 0;
  padding: 15%;
  background-image: url(../img/dummy.png);
  border-radius: 50vw;
  margin-top: 10%;
  background-size: cover;

  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 1s;
}
.recruit__work-environment-img-1 {
  background-image: url(../img/recruit__work-environment-img-1.png);
}
.recruit__work-environment-img-2 {
  background-image: url(../img/recruit__work-environment-img-2.png);
  margin-top: 3%;
}
.recruit__work-environment-img-3 {
  background-image: url(../img/recruit__work-environment-img-3.png);
}
.recruit__work-environment-img-4 {
  background-image: url(../img/recruit__work-environment-img-4.png);
  margin: 0;
  margin-top: -2%;
  margin-right: -1%;
  flex-grow: 0;
}
.recruit__work-environment-img-5 {
  background-image: url(../img/recruit__work-environment-img-5.png);
  margin: 0;
  margin-top: -2%;
  flex-grow: 0;
}

.recruit__FAQ-container {
  flex-flow: column;
  width: 65%;
  gap: 1.5rem;
}
.recruit__individual-FAQ-container {
  justify-content: flex-start;
  width: 100%;
}
.recruit__individual-FAQ-container > div {
  justify-content: flex-start;
  text-align: left;
}
.recruit__individual-FAQ-Q {
  width: 100%;
  height: 4rem;
  background-color: #5076d0;
  border-radius: 10px;

  cursor: pointer;

  z-index: 1;
}
.recruit__individual-FAQ-Q div:nth-of-type(1) {
  flex-grow: 0;
  padding-left: 1.2rem;
  padding-right: 0.8rem;
  font-family: sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: transparent;
  -webkit-text-stroke: 1px #ffffff;
  opacity: 1;
}
.recruit__individual-FAQ-Q div:nth-of-type(2) {
  justify-content: flex-start;
  flex-grow: 1;
  text-align: left;
  color: #ffffff;
}
.recruit__individual-FAQ-Q div:nth-of-type(3) {
  flex-grow: 0;
  margin-right: 0.5rem;
}

.recruit__individual-FAQ-A {
  width: 100%;
  height: 5rem;
  margin-top: -10px;
  background-color: #ffffff;
  border: 1px solid var(--BORDER-COLOR);

  border-radius: 0 0 10px 10px;
  overflow: hidden;

  transition-duration: 1s;
}
.recruit__individual-FAQ-A div:nth-of-type(1) {
  flex-grow: 0;
  padding-left: 1.2rem;
  padding-right: 0.8rem;
  font-family: sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: transparent;
  -webkit-text-stroke: 1px #ffac00;
  opacity: 1;
}
.recruit__individual-FAQ-A div:nth-of-type(2) {
  justify-content: flex-start;
  flex-grow: 1;
  text-align: left;
  color: #333333;
}
.emphasis-container {
  margin: 2rem 0;
  color: #5076d0;
  font-weight: 600;
  font-size: 32px;
  z-index: 1;
}
.orange-under-bar {
  position: absolute;
  bottom: -0.6rem;
  left: 0;
  width: 100%;
  height: 60%;
  background-color: #ffac00;
  z-index: -1;

  transition-delay: 1.2s;
  transition-duration: 1s;
}

.recruit__modal-window {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.recruit__modal-window-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.36;
  z-index: 9999;
}
.recruit__work-applicant {
  justify-content: flex-start;
  flex-flow: column;
  flex-grow: 0;
  width: 50%;
  height: fit-content;
  max-height: 80vh;
  padding: 2rem 0;
  background-color: #ffffff;
  border-radius: 10px;
  z-index: 10000;

  overflow-y: auto;
}
.recruit__work-applicant-row {
  align-items: flex-start;
  flex-grow: 0;
  width: 90%;
  border-top: 1px solid var(--BORDER-COLOR);
  padding: 0.8rem 0;
}
.recruit__work-applicant-row:nth-of-type(1) {
  border-top: none;
}
.recruit__work-applicant-row div:nth-of-type(1) {
  justify-content: flex-start;
  text-align: left;
  width: 25%;
}
.recruit__work-applicant-row div:nth-of-type(2) {
  justify-content: flex-start;
  text-align: left;
  width: 75%;
}
.recruit__work-applicant-column {
  flex-flow: column;
  align-items: flex-start;
}
.recruit__work-applicant-column span {
  font-size: 11px;
}
.recruit__cross-mark-container {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0.5rem 0.5rem 0 0;
  cursor: pointer;
  z-index: 10002;
}

.recruit__entory-button-modal {
  width: 55%;
  padding: 3% 0;
  background-color: #fdbf3f;
  box-shadow: 0px 3px 0px #eda613;
  border-radius: 10px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 400;
  margin: 2rem 0 3rem 0;
}
.recruit__entory-button-modal:hover {
  top: 3px;
  box-shadow: 0px 0px 0px #eda613;
}

.fit-a-tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10005;
}

.recruit__background-bubble-container {
  width: 100%;
}

.recruit__background-bubble1,
.recruit__background-bubble2,
.recruit__background-bubble3,
.recruit__background-bubble4,
.recruit__background-bubble5,
.recruit__background-bubble6,
.recruit__background-bubble7,
.recruit__background-bubble8,
.recruit__background-bubble9,
.recruit__background-bubble10 {
  position: absolute;
  margin-top: 0;
  background-size: cover;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 1s;
}
.recruit__background-bubble1 {
  top: -150px;
  right: -7%;
  width: 35%;
  padding: 19% 0;
  background-image: url(../img/recruit-background-bubble1.png);
}

.recruit__background-bubble2 {
  top: 135px;
  left: -9%;
  width: 40%;
  padding: 21.6% 0;
  background-image: url(../img/recruit-background-bubble2.png);
}

.recruit__background-bubble3 {
  top: -332px;
  right: -13%;
  width: 35%;
  padding: 19.3% 0;
  background-image: url(../img/recruit-background-bubble3.png);
  z-index: -1;
}
.recruit__background-bubble4 {
  top: -600px;
  left: -6%;
  width: 33%;
  padding: 17.6% 0;
  background-image: url(../img/recruit-background-bubble4.svg);
  z-index: -1;
}

.recruit__background-bubble5 {
  top: 440px;
  right: -7%;
  width: 35%;
  padding: 18.8% 0;
  background-image: url(../img/recruit-background-bubble5.svg);
}
.recruit__background-bubble6 {
  top: -553px;
  left: -13%;
  width: 35%;
  padding: 18.4% 0;
  background-image: url(../img/recruit-background-bubble6.svg);
  z-index: -1;
}

.recruit__background-bubble7 {
  top: 521px;
  right: -8%;
  width: 35%;
  padding: 20.1% 0;
  background-image: url(../img/recruit-background-bubble7.svg);
}
.recruit__background-bubble8 {
  top: 140px;
  left: -12%;
  width: 40%;
  padding: 20.8% 0;
  background-image: url(../img/recruit-background-bubble8.png);
}

.recruit__background-bubble9 {
  top: 567px;
  right: -5%;
  width: 35%;
  padding: 18.8% 0;
  background-image: url(../img/recruit-background-bubble9.png);
}
.recruit__background-bubble10 {
  top: -38px;
  left: -14%;
  width: 35%;
  padding: 17.5% 0;
  background-image: url(../img/recruit-background-bubble10.png);
}

.header-sp-menu-bubble-1,
.header-sp-menu-bubble-2,
.header-sp-menu-bubble-3 {
  position: absolute;
  margin-top: 0;
  background-size: cover;
}
.header-sp-menu-bubble-1 {
  top: -20vw;
  left: -22vw;
  width: 40%;
  padding: 19.9% 0;
  background-image: url(../img/header-sp-menu-bubble-1.svg);
}
.header-sp-menu-bubble-2 {
  top: 24vw;
  right: -7vw;
  width: 40%;
  padding: 20.6% 0;
  background-image: url(../img/header-sp-menu-bubble-2.svg);
}
.header-sp-menu-bubble-3 {
  top: 100vw;
  right: -12vw;
  width: 50%;
  padding: 25.8% 0;
  background-image: url(../img/header-sp-menu-bubble-3.svg);
}

.header__items-container-sp ul {
  font-weight: 500;
}
.header__items-container-sp li {
  font-weight: 400;
  line-height: 2.2rem;
}

.header__sp-modal-lists {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  width: 60%;
}
.header__sp-modal-lists p:hover,
.header__sp-modal-lists li:hover {
  opacity: 0.5;
}
@media screen and (min-width: 1025px) {
  .pc-hdn {
    display: none;
  }
}
/* || FOR SP */
@media screen and (max-width: 1024px) {
  .sp-hdn {
    display: none;
  }

  body {
    min-width: 320px;
  }
  h2 {
    font-size: 36px;
  }
  .header__logo {
    margin-left: 5%;
  }
  .header__items_container {
    margin-right: 5%;
  }
  .header__items-container-sp {
    position: fixed;
    top: var(--HEADER-HEIGHT);
    flex-flow: column;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    right: 0;
    color: #333333;
    background-color: #ffffff;
    transition-duration: 1s;
    overflow: hidden;
  }
  .header__sp-modal-lists {
    width: 80%;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column;
    flex-grow: 0;
    /* gap: 2rem; */
    font-size: 1.5rem;
  }
  .header__sp-modal-lists ul {
    margin-top: 14px;
  }
  .header__sp-modal-lists li {
    font-size: 1rem;
    margin-left: 1rem;
  }
  .footer__lists {
    width: 80%;
    margin-top: 1rem;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column;
    flex-grow: 0;
    gap: 2rem;
    font-size: 1.5rem;
  }
  .footer__lists li {
    font-size: 1rem;
    margin-left: 1rem;
  }
  .footer__container {
    width: 90%;
    padding-top: 6vw;
  }
  .footer__container,
  .footer__container > div {
    flex-flow: column;
  }
  .footer__entry-contact-container {
    width: 100%;
    margin-top: 15vw;
  }
  .footer__button-text-container p:nth-of-type(1) {
    font-size: 4vw;
    margin: 0;
    margin-right: 3vw;
  }
  .footer__button-text-container p:nth-of-type(2) {
    font-size: 2vw;
    margin-right: 10vw;
    margin-left: 0;
  }
  .footer__entry-container,
  .footer__contact-container {
    height: 15vw;
  }
  .footer__entry-img-container,
  .footer__contact-img-container {
    height: 100%;
    object-fit: cover;
  }
  .footer__entry-img-container img,
  .footer__contact-img-container img {
    height: 100%;
    object-fit: cover;
  }
  .main__pickup {
    align-items: center;
  }
  .main__office-container {
    width: 90%;
    padding: 0 0 10vw 0;
    padding-top: 15%;
  }
  .main__office-limitter-container {
    width: 100%;
    gap: 10vw;
  }
  .main__office-osaka-tokyo-container {
    flex-flow: column;
  }
  .main__office-osaka-tokyo-container > div {
    width: 100%;
  }
  .main__office-osaka-tokyo-container > div > div {
    width: 100%;
    margin: 0.5rem 0;
  }
  .main__company-osaka-google-map,
  .main__company-tokyo-google-map {
    width: 100%;
    height: 50vw;
  }
  .main__office-osaka-tokyo-container a {
    width: 100%;
  }
  .main__google-map-link {
    width: 100%;
  }

  .top-img-container {
    width: 100%;
    height: 150vw;
  }
  .main__top-image-1 {
    background-image: url(../img/top-1-sp.png);
  }
  .main__top-image-2 {
    background-image: url(../img/top-2-sp.png);
  }
  .main__top-image-3 {
    background-image: url(../img/top-3-sp.png);
  }
  .main__top-image-4 {
    background-image: url(../img/top-4-sp.png);
  }
  .main__top-text {
    bottom: 0;
    font-size: 14vw;
  }
  .main__work-experience-small-image-container {
    right: auto;
    width: 90%;
    margin: 0;
    margin-bottom: -25%;
    z-index: 1;
  }
  .main__update,
  .main__pickup {
    flex-grow: 1;
    width: 100%;
    padding-left: 0;
  }
  .main__pickup {
    margin-top: 4rem;
  }
  .main__update-pickup-container {
    flex-flow: column;
    padding: 30% 5% 25% 5%;
    margin-bottom: 30%;
  }
  .main__update-text-content {
    margin-right: 10%;
  }
  .main__update_cover-container {
    align-self: center;
  }
  .main__pickup .cover-container:nth-of-type(1) {
    justify-content: center;
    width: fit-content;
  }
  .main__pickup .cover-container:nth-of-type(2) {
    justify-content: center;
    width: 100%;
  }
  .main__about {
    flex-flow: column;
    padding: 0 5% 40% 5%;
  }
  .about-title > div {
    justify-content: center;
    width: fit-content;
    flex-grow: 0;
  }

  .main__about-img-container {
    width: 100%;
    height: 60vw;
    margin: 0.5rem 0;
  }
  .main__about-img-container .cover-container {
    width: 100%;
    height: 100%;
  }

  .main__about-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
  .about-explain {
    text-align: left;
    line-height: 1.5rem;
    margin-bottom: 1rem;
  }
  .main__service {
    padding: 20% 5% 20% 5%;
    margin-bottom: 30%;
  }
  .main__service-links {
    flex-flow: column;
    width: 100%;
    height: 190vw;
    gap: 5vw;

    margin-top: 15%;
    margin-bottom: 15%;
  }
  /* .main__service-img-relative-container {
    width: 80%;
  } */
  .main__about-explain-container {
    align-items: center;
    padding: 0;
  }
  .main__service-img-relative-container {
    width: 100%;
    padding-top: 34.25%;
    padding-bottom: 34.25%;
  }
  .main__service-img-container {
    width: 100%;
  }
  .main__service-img-container p {
    font-size: 4vw;
  }
  .main__service-ellipse-container {
    width: 100%;
  }
  .main__recruit {
    padding-left: 5%;
    padding-right: 5%;
  }
  .main__recruit-links {
    justify-content: space-between;
    gap: 0.8rem;
  }
  .main__recruit-link {
    flex-grow: 0;
    width: 45%;
    margin: 0 auto;
  }
  .main__recruit-link .right-arrow {
    transform: scale(0.8);
  }
  .main__recruit-link-text {
    font-size: 1rem;
    padding-right: 1rem;
  }

  .main__instagram-images {
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1rem 0 1rem 0;
  }
  .main__instagram_image-container {
    width: 40%;
    height: 40vw;
    margin-bottom: 1rem;
  }
  .main__instagram-link {
    width: 100%;
  }
  .main__work-experience-img-people {
    width: 82%;
  }
  .main__work-experience-text {
    width: 80%;
    height: 40vw;
  }
  .main__work-experience-text p:nth-of-type(1) {
    font-size: 3.8vw;
  }
  .main__work-experience-text p:nth-of-type(2) {
    font-size: 9vw;
  }
  .main__work-experience-img-bubble {
    width: 94%;
  }
  .about__main-background-img-container {
    z-index: -1;
  }
  .semicircle-container {
    top: 15vw;
    height: 200vw;
    z-index: -1;
  }
  .semicircle-window {
    padding-top: 200%;
  }

  .about__philosophy-container {
    width: 90%;
    margin-top: 3rem;
  }
  .about__president-img-container {
    width: 100%;
    margin: 0;
  }
  .about__president-img-container img {
    width: 100%;
  }
  .about__philosophy-sub-title {
    font-size: 18px;
  }
  .about__philosophy-sign-text {
    text-align: right;
  }
  .about__philosophy-sign-container img {
    width: 50%;
    max-width: 250px;
  }
  .about__about-container {
    width: 90%;
  }
  .about__about-internal-outline {
    width: 100%;
  }
  .about__about-name-container {
    flex-flow: column;
    align-items: flex-start;
    width: 90%;
    padding: 3% 0;
  }
  .about__about-name-container div:nth-of-type(1) {
    padding-bottom: 3%;
  }
  .about__about-name-container div:nth-child(1) {
    width: 100%;
  }
  .about__about-name-container div:nth-child(2) {
    width: 100%;
  }
  .about__about-company-imgs-container {
    width: 90%;
    flex-flow: column;
  }
  .about__about-company-imgs-container div {
    width: 100%;
    flex-flow: column;
    align-items: flex-start;
  }
  .about__about-company-img-container {
    padding: 0;
    padding-top: 0.5rem;
  }
  .contact__main-background-img-container {
    z-index: -2;
  }
  .contact__work-experience-title-container {
    padding-top: 4rem;
  }
  .contact__work-experience-container {
    width: 90%;
  }
  .contact__main-title {
    font-size: 30px;
  }
  .contact__work-experience-before-entry {
    padding-top: 5rem;
    font-size: 17px;
  }
  .contact__work-experience-title {
    font-size: 27px;
  }
  .about__contact-work-experience-img-size-container {
    padding: 35% 0;
  }
  .contact__work-experience-buttons-container {
    flex-flow: column;
  }
  .contact__work-experience-buttons-container > div {
    width: 100%;
  }
  .contact__contact-container {
    padding-top: 15vw;
    width: 90%;
  }
  .contact__contact-input-container {
    flex-flow: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .contact__contact-input-container > div {
    width: 100%;
  }
  .contact__contact-agree-container {
    flex-flow: row;
    justify-content: flex-start;
  }
  .contact__contact-agree-container {
    text-align: left;
  }
  .contact__contact-agree-container input {
    min-width: 24px;
  }

  .contact__agree-container-confirm-view {
    width: 90%;
  }

  .contact__send-complete-container {
    width: 90%;
  }
  .contact__send-complete-title {
    font-size: 42px;
  }
  .contact__send-complete-container .complete-bubble-position-1 {
    right: -30%;
  }
  .contact__send-complete-container .complete-bubble-position-2 {
    left: -35%;
  }
  .service__sub-title-position-container {
    position: absolute;
    top: -3.6rem;
    z-index: 1;
  }
  .service__service-list-container {
    width: 90%;
  }
  .service__main-background-img-container {
    z-index: -2;
  }
  .service__service-button-item {
    width: 40%;
  }
  .service__work-picture-book-container {
    width: 90%;
    padding-top: 10vw;
  }
  .service__service-which-one-both-img-container {
    gap: 3%;
  }
  .service__service-which-one-both-img-container img:nth-of-type(1) {
    width: 110%;
    max-width: 110%;
  }
  .service__service-button-construction,
  .service__service-button-office-work {
    height: 16vw;
  }
  .service__service-button-construction:hover,
  .service__service-button-office-work:hover {
    opacity: 1;
  }
  .service__service-which-one-construction-container,
  .service__service-which-one-office-work-container {
    flex-flow: column;
    width: 90%;
    gap: 0;
  }
  .service__service-which-one-construction-container > div,
  .service__service-which-one-office-work-container > div {
    width: 100%;
  }
  .service__service-which-one-child-title {
    font-size: 1.2rem;
  }
  .service__service-which-one-child-text {
    font-size: 1rem;
    height: auto;
    padding-bottom: 1rem;
  }
  .service__background-bubble-1 {
    padding: 27.5% 0;
  }
  .slider-container {
    width: 100%;
    padding: 50% 0;
    margin-bottom: 3rem;
    background-color: #f3f4f4;
  }
  .view-window {
    width: 60%;
  }

  .view-window > div {
    width: 100%;
    padding: 67.5% 0;
  }
  .slider-pos-1 {
    left: calc(1 * -300%);
  }
  .slider-pos-2 {
    left: calc(1 * -200%);
  }
  .slider-pos-3 {
    left: calc(1 * -100%);
  }
  .slider-pos-4 {
    left: calc(1 * 0%);
  }
  .slider-pos-5 {
    left: calc(1 * 100%);
  }
  .slider-pos-6 {
    left: calc(1 * 200%);
  }
  .slider-pos-7 {
    left: calc(1 * 300%);
  }
  .slider-pos-8 {
    left: calc(1 * 400%);
  }
  .slider-pos-9 {
    left: calc(1 * 500%);
  }
  .left-arrow-button {
    left: 3%;
    transform: scale(0.8);
  }
  .right-arrow-button {
    right: 3%;
    transform: scale(0.8);
  }

  .service__service-list-container-text {
    width: 100%;
  }
  .service__sub-list-title {
    font-size: 37px;
  }
  .emphasis-container {
    font-size: 21px;
  }
  .recruit__main-background-img-container {
    z-index: -2;
  }
  .recruit__applicant-guideline-container {
    padding-top: 10vw;
  }
  .recruit__work-panel-container {
    flex-flow: column;
    width: 90%;
  }
  .recruit__work-panel-container > div {
    flex-flow: column;
    gap: 5vw;
  }
  .recruit__work-panel {
    padding: 40%;
    font-size: 3vw;
  }
  .recruit__work-panel-title {
    font-size: 3.2vw;
  }
  .recruit__work-panel-container > div {
    font-size: 4vw;
  }
  .recruit__entory-button {
    width: 90%;
    height: 18vw;
  }
  .recruit__individual-interview {
    width: 90%;
  }
  .recruit__work-panel-button {
    font-size: 3.2vw;
  }
  .recruit__entory-button {
    font-size: 4vw;
  }
  .recruit__individual-interview-top-text {
    font-size: 22px;
    line-height: 1.5rem;
  }
  .recruit__individual-interview-top-profile {
    font-size: 11px;
  }

  .recruit__individual-interview-top-background-img-1,
  .recruit__individual-interview-top-background-img-2,
  .recruit__individual-interview-top-background-img-3,
  .recruit__individual-interview-top-background-img-4,
  .recruit__individual-interview-top-background-img-5 {
    padding: 22.9% 0;
  }
  .recruit__individual-interview-top-background-img-1 {
    background-position-x: 50%;
  }
  .recruit__individual-interview-top-background-img-2 {
    background-position-x: 50%;
  }
  .recruit__individual-interview-top-background-img-3 {
    background-position-x: 80%;
  }
  .recruit__individual-interview-top-background-img-4 {
    background-position-x: 80%;
  }
  .recruit__individual-interview-top-background-img-5 {
    background-position-x: 80%;
  }
  .recruit__individual-interview-image {
    float: none;
    margin: 0;
    width: 100%;
    margin-bottom: 5%;
  }

  .recruit__individual-interview-top-text {
    font-size: 5.5vw;
    line-height: 6vw;
  }
  .recruit__individual-interview-top-profile {
    margin-top: 1vw;
    font-size: 2.9vw;
    line-height: 3.2vw;
  }
  .recruit__work-environment-container {
    width: 90%;
  }
  .recruit__work-environment-img-container {
    width: 100%;
    height: 0;
    padding: 90% 0;
  }

  .recruit__work-environment-img-1,
  .recruit__work-environment-img-2,
  .recruit__work-environment-img-3,
  .recruit__work-environment-img-4,
  .recruit__work-environment-img-5 {
    position: absolute;
    top: 2rem;
    left: 0;
    padding: 25%;
    margin: 0;
  }
  .recruit__work-environment-img-2 {
    left: auto;
    right: 0;
    margin-top: 30%;
  }
  .recruit__work-environment-img-3 {
    margin-top: 60%;
  }
  .recruit__work-environment-img-4 {
    left: auto;
    right: 0;
    margin-top: 90%;
  }
  .recruit__work-environment-img-5 {
    margin-top: 120%;
  }
  .recruit__FAQ-container {
    width: 90%;
  }
  .recruit__individual-FAQ-Q {
    flex-wrap: nowrap;
    height: fit-content;
    padding: 1rem 0;
    min-height: 4rem;
  }
  .recruit__individual-FAQ-A {
    flex-wrap: nowrap;
    height: 4.4rem;
    padding-right: 0.3rem;
  }
  .recruit__FAQ-container > div:nth-of-type(5) > .recruit__individual-FAQ-A {
    height: 9rem;
  }
  @media screen and (min-width: 370px) {
    .recruit__FAQ-container > div:nth-of-type(5) > .recruit__individual-FAQ-A {
      height: 6rem;
    }
  }

  .recruit__individual-FAQ-Q div:nth-of-type(2),
  .recruit__individual-FAQ-A div:nth-of-type(2) {
    width: 60%;
  }
  .recruit__work-applicant {
    width: 90%;
  }
  .recruit__work-applicant-row {
    flex-flow: column;
  }
  .recruit__work-applicant-row div:nth-of-type(1) {
    width: 100%;
  }
  .recruit__work-applicant-row div:nth-of-type(2) {
    width: 100%;
  }
  .recruit__entory-button-modal {
    width: 90%;
  }
  .recruit__work-panel-button {
    padding-right: 1rem;
    top: 76%;
  }

  /* for background-bubble-animation */
  .about__president-img-container {
    z-index: 1;
  }
  .about__philosophy-background-bubble {
    top: 11%;
    left: -8%;
    z-index: 0;
  }
  .about__about-background-bubble-top {
    top: 47%;
  }
  .about__aoubt-background-bubble-bottom {
    bottom: 0%;
  }
  .contact__contact-background-bubble-bottom-container {
    bottom: -3%;
    left: -35%;
  }

  .service__background-bubble-1 {
    top: -180px;
    right: -10%;
    width: 50%;
  }
  .service__background-little-bubble {
    width: 105%;
    padding: 6.93% 0;
    top: -13px;
  }
  .service__background-bubble-2 {
    width: 50%;
    padding: 26% 0;
    bottom: 500px;
    left: -22%;
  }
  .service__background-bubble-3 {
    right: -17%;
    width: 50%;
    padding: 27% 0;
  }
  .service__background-bubble-4 {
    top: -170px;
    left: -12%;
    width: 50%;
    padding: 25% 0;
  }
  .service__service-list-container {
    z-index: 1;
  }
  .recruit__background-bubble1 {
    top: -150px;
    right: -5%;
    width: 50%;
    padding: 32.1% 0;
  }
  .recruit__background-bubble2 {
    top: 135px;
    left: -9%;
    width: 50%;
    padding: 27% 0;
  }
  .recruit__background-bubble3 {
    right: -24%;
    width: 50%;
    padding: 27.6% 0;
  }

  .recruit__background-bubble4 {
    left: -15%;
    width: 50%;
    padding: 26.7% 0;
  }

  .recruit__background-bubble5 {
    width: 50%;
    padding: 26.9% 0;
    right: -19%;
  }
  .recruit__background-bubble6 {
    width: 50%;
    padding: 26.3% 0;
    left: -27%;
  }

  .recruit__background-bubble7 {
    width: 50%;
    padding: 28.7% 0;
    right: -20%;
  }
  .recruit__background-bubble8 {
    width: 50%;
    padding: 26% 0;
    left: -23%;
  }

  .recruit__background-bubble9 {
    width: 50%;
    padding: 26.9% 0;
    right: -22%;
  }
  .recruit__background-bubble10 {
    width: 50%;
    padding: 25% 0;
    left: -27%;
    z-index: -1;
  }
}

@media screen and (max-width: 500px) {
  .about__main-title {
    font-size: 44px;
  }
}

/* 以下はaboutページの電話番号みたいな文字だと発信するためその防止 */
.prevent-call {
  display: inline;
  letter-spacing: -1.7px;
}
.about__about-name-name {
  flex-flow: column;
  align-items: flex-start;
}

.width-100 {
  width: 100%;
}
.width-100 div {
  width: 100%;
}