@charset "UTF-8";

html {
  font-size: 62.5% !important;
  width: 100%;
  height: 100%;
  font-kerning: normal;
  font-feature-settings: "palt";
  scrollbar-gutter: stable;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

.material-symbols-outlined {
  font-variation-settings:
    "FILL"1,
    "wght"400,
    "GRAD"0,
    "opsz"24;
}

body {
  width: 100%;
  height: 100%;
  font-family: "Manrope", "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  background: #fff;
  color: #142833;
}

body.menu-open {
  overflow: clip;
}

main {
  width: 100%;
  height: 100%;
}

.corner-arch {
  width: calc(8px + 16 * ((100vw - 400px) / 1040));
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  margin-left: 10px;
}

.txt-no-wrap {
  display: inline-block;
}

.txt-wrap {
  display: block;
}

.parallax-wrap {
  overflow: hidden;
  position: relative;
}

.parallax {
  width: 100%;
  will-change: transform;
}

.fadein {
  will-change: transform, opacity;
}

.pace .pace-progress {
  background: #008cd6 !important;
  height: calc(2px + 2 * ((100vw - 400px) / 1040)) !important;
}


/*------------------------------------------------ヘッダー------------------------------------------------*/

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  z-index: 9999;
}

/*------------------------------------------------ヘッダー/ロゴ------------------------------------------------*/

.header-logo {
  display: flex;
  flex-direction: column;
}

.header-logo-wrapper {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0 0 calc(8px + 16 * ((100vw - 400px) / 1040)) 0;
  box-sizing: border-box;
  padding: calc(20px + 12 * ((100vw - 400px) / 1040));
  padding-left: calc(16px + 8 * ((100vw - 400px) / 1040));
}

.header-logo-img-box {
  width: calc(160px + 40 * ((100vw - 400px) / 1040));
}

.header-logo-img {
  width: 100%;
  object-fit: cover;
}

/*------------------------------------------------ヘッダー/ナビ------------------------------------------------*/

.header-nav {
  display: flex;
  align-items: center;
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  gap: 3em;
  position: fixed;
  top: 0;
  right: calc(12px + 28 * ((100vw - 400px) / 1040));
  padding-top: calc(16px + 24 * ((100vw - 400px) / 1040));
  z-index: 10000;
}


.header-nav-fv-show {
  display: flex;
  gap: 3em;
  transition: 0.6s ease;
}

.header.is-scrolled .header-nav-fv-show {
  opacity: 0;
  transform: translateY(calc(-8px + (-16) * ((100vw - 400px) / 1040)));
  pointer-events: none;
}

@media screen and (max-width: 1040px) {
  .header-nav-fv-show {
    display: none;
  }
}

/* FV内だけ白 */
.header-nav-fv-show-list-link {
  color: #142833;
  text-shadow:
    0.01em 0.01em 0 rgba(20, 40, 51, 0.2),
    -0.01em 0.01em 0 rgba(20, 40, 51, 0.2),
    0.01em -0.01em 0 rgba(20, 40, 51, 0.2),
    -0.01em -0.01em 0 rgba(20, 40, 51, 0.2);
  position: relative;
}

.header-nav.is-fv .header-nav-fv-show-list-link {
  color: #fff;
}

.header-nav-fv-show-list-link::after {
  content: "";
  width: 0;
  height: 1px;
  background: #142833;
  position: absolute;
  left: 0;
  bottom: -.05em;
  transition: .2s ease;
}

.header-nav.is-fv .header-nav-fv-show-list-link::after {
  background: #fff;
}

.header-nav-fv-show-list-link:hover::after {
  width: 100%;
}

.header-nav-fv-btn {
  font-size: calc(14px + 4 * ((100vw - 400px) / 1040));
  border-radius: 9999px;
  position: relative;
}

.header-nav-fv-btn-wrapper {
  transition: 0.6s ease;
  width: calc(138px + 29 * ((100vw - 400px) / 1040));
  height: calc(48px + 16 * ((100vw - 400px) / 1040));
  background: #008cd6;
  border-radius: 9999px;

}

@media screen and (max-width: 1040px) {
  .header-nav-fv-btn-wrapper {
    display: flex;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    column-gap: 0.5em;
    align-items: center;
  }
}

.header-nav-fv-btn-wrapper:has(.hamburger-wrapper.is-open) {
  background: #f2f5f6;
}

@media screen and (max-width: 1040px) {
  .header-nav-fv-btn-wrapper:has(.hamburger-wrapper.is-open) {
    background: none;
  }
}

.header.is-scrolled .header-nav-fv-btn-wrapper {
  transition: 0.6s ease;
  width: calc(48px + 32 * ((100vw - 400px) / 1040));
  height: calc(48px + 32 * ((100vw - 400px) / 1040));
}

.header.is-scrolled .header-nav-fv-btn-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #008cd6;
  transition: 0.4s ease;
  aspect-ratio: 1 / 1;
  width: 0%;
  height: 0%;
  border-radius: 9999px;
  transition: 0.2s ease;
  background: #fff;
}

@media (hover: hover) {
  .header.is-scrolled .header-nav-fv-btn-wrapper:hover::before {
    width: 100%;
    height: 100%;
  }
}

.header-nav-fv-cv-btn {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 1em;
  column-gap: 0.5em;
}

@media screen and (max-width: 1040px) {
  .header-nav-fv-cv-btn {
    background: #008cd6;
    width: auto;
    height: auto;
    padding: 1em 1.25em;
    border-radius: 9999px;
  }
}

@media screen and (max-width: 1040px) {
  .header-nav-fv-cv-btn .round-arrow-icon-box {
    display: none;
  }
}

/*-- 共通ボタンアローここから --*/

.round-arrow-icon-box {
  width: calc(21px + 9 * ((100vw - 400px) / 1040));
  height: calc(21px + 9 * ((100vw - 400px) / 1040));
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


.round-arrow-icon {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-100%, -50%);
  width: calc(10px + 4 * ((100vw - 400px) / 1040));
  transition: 0.2s ease;
  transition-delay: 0.1s;
  z-index: 2;
  opacity: 0;
}

@media screen and (max-width: 1040px) {
  .round-arrow-icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.round-arrow-circle {
  width: .25em;
  height: .25em;
  background-color: #fff;
  background-image: url(../img/inner-icon-008CD6-14x14.svg), url(../img/inner-icon-008CD6-14x14.svg);
  background-size: 0;
  background-repeat: no-repeat;
  background-position: center center, calc(50% - 1em) calc(50% + 1em);
  transition: 0.3s ease;
  border-radius: 9999px;
}

.round-arrow-circle-external {
  overflow: hidden;
  background-image: url(../img/external-icon-008CD6-14x14.svg), url(../img/external-icon-008CD6-14x14.svg);
  transition: .4s ease;
  background-size: 0;
  background-position: center center, calc(50% - 1.3em) calc(50% + 1.3em);
  background-repeat: no-repeat;
  width: 0.25em;
  height: .25em;
  border-radius: 9999px;
  background-color: #fff;
  transition: 0.3s ease;
}

@media screen and (max-width: 1040px) {
  .round-arrow-circle-external {
    width: calc(21px + 9 * ((100vw - 400px) / 1040));
    height: calc(21px + 9 * ((100vw - 400px) / 1040));
    background-size: 0.7em;
  }
}

.naked-round-arrow-icon-box .round-arrow-circle {
  background-color: #8098a5;
}

@media screen and (max-width: 1040px) {
  .naked-round-arrow-icon-box .round-arrow-circle {
    background-color: #008cd6;
  }
}

/*-- 共通ボタンアローここまで --*/


@media (hover: hover) {
  .header-nav-fv-cv-btn:hover .round-arrow-circle-external {
    background-color: #fff;
    background-size: 0.7em;
    background-position: calc(50% + 1.3em) calc(50% - 1.3em), center center;
    width: calc(21px + 9 * ((100vw - 400px) / 1040));
    height: calc(21px + 9 * ((100vw - 400px) / 1040));
  }
}

.header.is-scrolled .header-nav-fv-cv-btn {
  transition: 0.6s ease;
  display: none;
}

.header-nav-fv-btn-recruit-txt {
  display: block;
  width: auto;
  opacity: 1;
  transition: 0.2s ease;
  color: #fff;
}

.header.is-scrolled .header-nav-fv-btn-recruit-txt {
  opacity: 0;
}

/*------------------------------------------------ヘッダー/ハンバーガー-----------------------------------------------*/

.hamburger-wrapper {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10001;
}

.header.is-scrolled .hamburger-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(128, 152, 165, 0.15);
}

@media screen and (max-width: 1040px) {
  .hamburger-wrapper {
    position: static;
    display: block;
    width: calc(48px + 32 * ((100vw - 400px) / 1040));
    height: calc(48px + 32 * ((100vw - 400px) / 1040));
    background: #008cd6;
    border-radius: 9999px;
    border: 1px solid rgba(128, 152, 165, 0.1);
  }

  .hamburger-wrapper.is-open {
    background: #f2f5f6;
  }

  .header-nav-fv-btn-wrapper:has(.hamburger-wrapper.is-open) .header-nav-fv-cv-btn {
    display: none;
  }
}

.hamburger {
  width: calc(12px + 8 * ((100vw - 400px) / 1040));
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  z-index: 9999;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.hamburger-line {
  display: block;
  width: 80%;
  height: 3px;
  background: #142833;
  border-radius: 9999px;
  position: absolute;
  transition: 0.2s ease;
  background: #fff;
}


.header.is-scrolled .header-nav-fv-btn-wrapper:hover .hamburger-line {
  background: #505f66;
}

.hamburger-wrapper.is-open .hamburger-line {
  background: #505f66;
}

.header.is-scrolled .header-nav-fv-btn-wrapper:hover .hamburger-wrapper.is-open .hamburger-line {
  background: #505f66;
}

@media screen and (max-width: 1040px) {
  .hamburger-line {
    height: 2px;
    background: #fff;
  }
}


.hamburger-line-top {
  top: 0;
  right: 0;
}

.hamburger-line-center {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-line-bottom {
  bottom: 0;
  left: 0;

}

.hamburger-wrapper.is-open .hamburger-line-top {
  right: unset;
  top: 50%;
  transform: translateY(-50%);
}


.hamburger-wrapper.is-open .hamburger-line-bottom {
  left: unset;
  bottom: 50%;
  transform: translateY(50%);
}

/*------------------------------------------------ヘッダー/メニュー----------------------------------------------*/

.fullscreen-menu {
  position: fixed;
  z-index: 9998;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.4s ease;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  /* Firefox */
  scrollbar-width: none;
  /* IE / Edge */
  -ms-overflow-style: none;
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu {
    flex-direction: column;
  }
}

/* Chrome / Safari */
.fullscreen-menu::-webkit-scrollbar {
  display: none;
}

/* 全画面メニューopen時 */

.fullscreen-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 全画面メニューヘッダー */
.fullscreen-menu-header-container {
  width: calc(100% - 920 * ((100vw - 400px) / 1040));
  padding-top: calc(60px + 36 * ((100vw - 400px) / 1040));
  padding-left: calc(40px + 40 * ((100vw - 400px) / 1040));
  padding-right: calc(40px + 40 * ((100vw - 400px) / 1040));
  position: sticky;
  top: 0;
  box-sizing: border-box;
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu-header-container {
    width: 100%;
    position: static;
    order: 2;
    padding-bottom: calc(60px + 36 * ((100vw - 400px) / 1040));
  }
}

.fullscreen-menu-header-container .menu-kv-box img {
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  width: 100%;
}

@media screen and (max-width: 1040px) {
  .menu-kv-box {
    display: none;
  }
}

.fullscreen-menu-header-logo-box {
  width: calc(180px + 100 * ((100vw - 400px) / 1040));
  font-size: calc(36px + 20 * ((100vw - 400px) / 1040));
  max-width: 280px;
  padding-top: calc(0px + 80 * ((100vw - 400px) / 1040));
  padding-bottom: calc(0px + 56 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu-header-logo-box {
    padding: 0;
  }
}

.fullscreen-menu-header-logo-box img {
  width: 100%;
}

/* 全画面メニューナビゲーション */
.fullscreen-menu-nav-container {
  width: calc(100% - 520 * ((100vw - 400px) / 1040));
  box-sizing: border-box;
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu-nav-container {
    width: 100%;
    order: 1;
  }
}

@media screen and (min-width: 1441px) {
  .fullscreen-menu-nav-container {
    width: 100%;
  }
}

.fullscreen-menu-nav-list-block {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: calc(60px + 20 * ((100vw - 400px) / 1040));
  padding-bottom: calc(10px + 30 * ((100vw - 400px) / 1040));
  border-left: 1px solid rgba(128, 152, 165, 0.15);
  font-size: calc(20px + 12 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu-nav-list-block {
    padding-right: calc(40px + 40 * ((100vw - 400px) / 1040));
    padding-left: calc(40px + 40 * ((100vw - 400px) / 1040));
    row-gap: 1em;
  }
}

.fullscreen-menu-nav-list {
  width: 100%;
  height: calc(154px + 40 * ((100vw - 400px) / 1040));
  color: #142833;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(128, 152, 165, 0.15);
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  padding-right: calc(0px + 80 * ((100vw - 400px) / 1040));
  padding-left: calc(0px + 80 * ((100vw - 400px) / 1040));
  position: relative;
  box-sizing: border-box;
}

.fullscreen-menu-nav-list::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #8098a5;
  transition: .4s ease;
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu-nav-list {
    align-items: flex-start;
    justify-content: space-between;
    padding: 0;
  }
}

@media (hover: hover) {
  .fullscreen-menu-nav-list:has(.fullscreen-menu-nav-list-h-box:hover)::after {
    width: 100%;
  }
}

.fullscreen-menu-nav-list a {
  height: 100%;
  box-sizing: border-box;
}


.fullscreen-menu-nav-list-h-box {
  width: calc(200px + 320 * ((100vw - 400px) / 1040));
  text-align: left;
  transition: .4s ease;
}

@media (hover: hover) {
  .fullscreen-menu-nav-list-h-box:hover {
    transform: translateX(0.5em);
  }
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu-nav-list-h-box {
    padding: 0;
  }
}

.fullscreen-menu-nav-list-h {
  margin-top: 0.25em;
  margin-bottom: 0.5em;
  line-height: 1.75;
  display: flex;
  align-items: flex-start;
  font-weight: 500;
}

.fullscreen-menu-nav-list-tag-h {
  font-size: calc(12px + 2 * ((100vw - 400px) / 1040));
  color: #008cd6;
}

.fullscreen-menu-nav-list-h-lead {
  font-size: calc(12px + 1 * ((100vw - 400px) / 1040));
  font-weight: 300;
}

.fullscreen-menu-nav-list-external-icon {
  width: 0.5em;
  display: flex;
  align-items: flex-start;
  margin-top: 0.5em;
  margin-left: 0.5em;
}

.fullscreen-menu-nav-list-page-anker-box {
  width: calc(120px + 120 * ((100vw - 400px) / 1040));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0.75em;
  font-size: 14px;
  white-space: nowrap;
}

@media screen and (min-width: 1441px) {
  .fullscreen-menu-nav-list-page-anker-box {
    font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  }
}

.fullscreen-menu-nav-page-anker-list {
  opacity: .5;
  transition: .3s ease;
}


@media (hover: hover) {
  .fullscreen-menu-nav-page-anker-list:has(a:hover) {
    opacity: 1;
  }
}

.fullscreen-menu-nav-page-anker-list a {
  display: flex;
  column-gap: .25em;
}

.fullscreen-menu-nav-page-anker-list-icon-box {
  width: .75em;
  height: .75em;
  margin-top: .25em;
  overflow: hidden;
  background-image: url(../img/external-icon-000-10x10.svg),
    url(../img/external-icon-000-10x10.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center,
    calc(50% - .75em) calc(50% + .75em);
  transition: background-position 0.3s;
}


/* 全画面メニューお問い合わせ */
.fullscreen-menu-nav-contact-block {
  color: #fff;
  position: relative;
  border-left: 1px solid rgba(128, 152, 165, 0.15);
}

.fullscreen-menu-nav-contact-block::before {
  content: "";
  display: block;
  background-image: url("../img/corner-arch-right-under-505f66-24x24.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(8px + 16 * ((100vw - 400px) / 1040));
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  position: absolute;
  right: 0;
  transform: translateY(calc(-8px + (-16) * ((100vw - 400px) / 1040)));
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu-nav-contact-block::before {
    display: none;
  }
}

.fullscreen-menu-nav-contact-block .contact-block {
  background: #505f66;
  display: flex;
  top: 0;
  margin: 0;
  border-radius: calc(8px + 16 * ((100vw - 400px) / 1040)) 0 0 0;
  padding: calc(36px + 28 * ((100vw - 400px) / 1040)) 0;
  padding-right: calc(0px + 80 * ((100vw - 400px) / 1040));
  padding-left: calc(0px + 80 * ((100vw - 400px) / 1040));
  column-gap: 0;
}

@media screen and (max-width: 1280px) {
  .fullscreen-menu-nav-contact-block .contact-block {
    flex-direction: column;
    text-align: center;
  }
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu-nav-contact-block .contact-block {
    flex-direction: row;
    text-align: left;
    padding-right: calc(40px + 40 * ((100vw - 400px) / 1040));
    padding-left: calc(40px + 40 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 768px) {
  .fullscreen-menu-nav-contact-block .contact-block {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu-nav-contact-block .contact-block {
    margin: 0 10px;
    border-radius: calc(8px + 16 * ((100vw - 400px) / 1040));
  }
}

.fullscreen-menu-nav-contact-block .contact-block .section-h-group {
  width: calc(100% - 440 * ((100vw - 400px) / 1040));
  font-size: calc(24px + 8 * ((100vw - 400px) / 1040));
  font-weight: 500;
}

@media screen and (max-width: 1280px) {
  .fullscreen-menu-nav-contact-block .contact-block .section-h-group {
    text-align: center;
    margin-bottom: 1em;
  }
}

@media screen and (max-width: 1040px) {
  .fullscreen-menu-nav-contact-block .contact-block .section-h-group {
    text-align: left;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .fullscreen-menu-nav-contact-block .contact-block .section-h-group {
    text-align: center;
    margin-bottom: 1em;
  }
}

.fullscreen-menu-nav-contact-block .contact-block .section-h-lead {
  font-size: calc(12px + 2 * ((100vw - 400px) / 1040));
  opacity: 0.75;
}

.fullscreen-menu-nav-contact-block .contact-block .call-group {
  width: calc(100% - 400 * ((100vw - 400px) / 1040));
  font-size: calc(36px + 8 * ((100vw - 400px) / 1040));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fullscreen-menu-nav-contact-block .contact-block .call-icon-box {
  width: calc(48px + 16 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .fullscreen-menu-nav-contact-block .contact-block .call-group {
    align-items: center;
  }
}

/*------------------------------------------------（TOP）ヒーロー------------------------------------------------*/

#hero {
  width: calc(100% - 10px);
  height: calc(100vh - 10px);
  margin-left: auto;
  position: relative;
  z-index: 0;
}

.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.is-show {
  opacity: 1;
  visibility: visible;
  transition: opacity .8s ease;
}

.hero-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.hero-swiper {
  width: 100%;
  height: 100%;
  border-radius: 0 0 0 calc(8px + 16 * ((100vw - 400px) / 1040));
  z-index: 0 !important;
}

.hero-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.swiper-slide-active img {
  width: 100%;
  height: 100%;
}

.hero-swiper-slide-2 img {
  object-position: left top;
}

.hero-swiper-slide-img-sp {
  display: none;
}

.hero-swiper-slide-img-pc {
  display: block;
}

@media screen and (max-width: 440px) {
  .hero-swiper-slide-img-sp {
    display: block;
  }

  .hero-swiper-slide-img-pc {
    display: none;
  }
}


.hero-copy-wrapper {
  display: flex;
  position: absolute;
  z-index: 3;
  bottom: calc(174px + (-96) * ((100vw - 400px) / 1040));
  left: calc(20px + 20 * ((100vw - 400px) / 1040));
  padding-right: calc(40px + 40 * ((100vw - 400px) / 1040));
}

@media screen and (min-width: 1440px) {
  .hero-copy-wrapper {
    bottom: 8.88%;
  }
}

@media screen and (max-width: 440px) {
  .hero-copy-wrapper {
    bottom: 222px;
  }
}


.line-mask {
  display: block;
  overflow: hidden;
}

.line {
  display: block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.line-1 {
  transition-delay: 0s;
}

.line-2 {
  transition-delay: .18s;
}


/* 表示時 */
.hero-copy-wrapper.is-show .line {
  transform: translateY(0);
}

.lower-h-group.is-show .line {
  transform: translateY(0);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-copy-container {
  padding-left: 1em;
  font-size: calc(40px + 32 * ((100vw - 400px) / 1040));
  color: #fff;
  text-shadow:
    0.005em 0.005em 0 rgba(20, 40, 51, 0.1),
    -0.005em 0.005em 0 rgba(20, 40, 51, 0.1),
    0.005em -0.005em 0 rgba(20, 40, 51, 0.1),
    -0.005em -0.005em 0 rgba(20, 40, 51, 0.1);
}

@media screen and (max-width: 768px) {
  .hero-copy-container {
    padding-left: 0;
  }
}

.hero-h {
  display: inline-block;
  gap: 0;
  margin-bottom: 0.5em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.hero-h span {
  display: inline-block;
}

.hero-tagline {
  font-size: calc(14px + 6 * ((100vw - 400px) / 1040));
  font-weight: 500;
  line-height: 1.25;
}

@media screen and (max-width: 768px) {
  .hero-tagline {
    padding-left: 2.25em;
  }
}

.hero-tagline span {
  display: inline-block;
}

/*-- スクロールインジケータここから --*/

.scroll-indicator {
  width: calc(4px + 4 * ((100vw - 400px) / 1040));
  height: calc(40px + 40 * ((100vw - 400px) / 1040));
  overflow: hidden;
  position: relative;
  background: #fff;
  border-radius: 9999px;
  margin-top: auto;
}

@media screen and (max-width: 768px) {
  #hero .scroll-indicator {
    position: absolute;
    bottom: 0;
    left: 4px;
  }
}

.scroll-indicator span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(20px + 20 * ((100vw - 400px) / 1040));
  background: #008cd6;
  border-radius: 9999px;
  animation: scrollMove 3s ease-in-out infinite;
}

@keyframes scrollMove {

  /* 上で停止 */
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  20% {
    transform: translateY(0);
    opacity: 1;
  }

  /* 下へ移動 */
  70% {
    transform: translateY(100px);
    opacity: 1;
  }

  /* 下へ抜けながら消える */
  71% {
    opacity: 0;
  }

  /* 上にワープ */
  72% {
    transform: translateY(-40px);
    opacity: 0;
  }

  /* 上から再登場 */
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/*-- スクロールインジケータここまで --*/
/*-- フローティングボタンここから --*/
.floating-wrapper {
  display: inline-block;
  position: fixed;
  right: 24px;
  bottom: 20px;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease;
  width: calc(370px + 104 * ((100vw - 400px) / 1040));
}

.floating-wrapper.is-show {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 440px) {
  .floating-wrapper {
    width: calc(100% - 40px);
    right: unset;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    margin-bottom: 10px;
  }
}

.floating-wrapper.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.floating {
  background: #fff;
  font-size: calc(14px + 4 * ((100vw - 400px) / 1040));
  border-radius: 0.44em;
  border: 1px solid #f0f0f0;

}

.floating-container {
  display: flex;
  column-gap: 1.5em;
  margin: 0.44em;
  box-sizing: border-box;
  position: relative;
  align-items: center;
}


.floating-close {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  width: 1.8em;
  height: 1.8em;
  border-radius: 9999px;
  background: #008cd6;
  color: #fff;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  line-height: 1;
  cursor: pointer;
  transition: 0.3s ease;
}

.floating-tag-h {
  font-size: calc(12px + 2 * ((100vw - 400px) / 1040));
  color: #8098a5;
}

.floating-h {
  margin-top: 0.25em;
  margin-bottom: 0.8em;
  line-height: 1.25;
}

.floating-thumb {
  display: flex;
  width: calc(120px + 43 * ((100vw - 400px) / 1040));
}

.floating-thumb img {
  object-fit: cover;
  width: 100%;
  border-radius: 0.44em;
}

.floating-btn {
  font-size: calc(12px + 2 * ((100vw - 400px) / 1040));
  background: #008cd6;
  color: #fff;
  display: inline-flex;
  align-items: center;
  column-gap: 0.5em;
  border-radius: 9999px;
  padding: 0.5em 1em;
  padding-right: 1.5em;
}

.floating-btn p {
  display: block;
}

@media (hover: hover) {
  .floating-container:hover .round-arrow-icon-external .round-arrow-icon {
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
  }

  .floating-container:hover .round-arrow-icon-external {
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  .floating-container:hover .round-arrow-circle {
    width: 100%;
    height: 100%;
  }
}

/*-- フローティングボタンここまで --*/
/*------------------------------------------------ （TOP）ヒーローここまで ------------------------------------------------*/
/*------------------------------------------------ （TOP）イントロここから ------------------------------------------------*/
#intro {
  width: 100%;
  height: auto;
  background-image: url("../img/intro-curve.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.intro_wrapper {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 0.8) 100%), url("../img/noise-fff-1440x1440-op10.webp");
  background-size: auto;
  background-position: left;
  background-repeat: repeat;
  position: relative;
  overflow-x: hidden;
}

.intro-img-container {}

.intro-img-block {
  position: absolute;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.intro-img-block-1 {
  width: calc(180px + 180 * ((100vw - 400px) / 1040));
  top: calc(72px + 48 * ((100vw - 400px) / 1040));
  left: calc(30px + 210 * ((100vw - 400px) / 1040));
}

.intro-img-block-2 {
  width: calc(160px + 160 * ((100vw - 400px) / 1040));
  top: calc(726px + (-286) * ((100vw - 400px) / 1040));
  right: calc(-40px + (-80) * ((100vw - 400px) / 1040));
  object-fit: contain;
}

@media screen and (max-width: 768px) {
  .intro-img-block-2 {
    top: unset;
    bottom: calc(216px + 664 * ((100vw - 400px) / 1040));
  }
}

.intro-img-block-3 {
  width: calc(152px + 328 * ((100vw - 400px) / 1040));
  top: calc(144px + 466 * ((100vw - 400px) / 1040));
  left: 0;
}

@media screen and (max-width: 1040px) {
  .intro-img-block-3 {
    width: calc(200px + 40 * ((100vw - 231px) / 769));
  }
}

@media screen and (max-width: 768px) {
  .intro-img-block-3 {
    width: calc(152px + 328 * ((100vw - 400px) / 1040));
    left: unset;
    right: 0;
  }

  .intro-img-block-3 img {
    border-radius: calc(4px + 4 * ((100vw - 400px) / 1040)) 0 0 calc(4px + 4 * ((100vw - 400px) / 1040));
  }
}

.intro-img-block-4 {
  width: calc(200px + 200 * ((100vw - 400px) / 1040));
  bottom: calc(96px + 64 * ((100vw - 400px) / 1040));
  right: calc(170px + 150 * ((100vw - 400px) / 1040));
}

.intro-img {
  object-fit: cover;
  width: 100%;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.intro-copy-container {
  font-size: calc(36px + 36 * ((100vw - 400px) / 1040));
  width: calc(326px + 74 * ((100vw - 400px) / 1040));
  padding-top: calc(360px + 80 * ((100vw - 400px) / 1040));
  padding-left: calc(30px + 690 * ((100vw - 400px) / 1040));
  padding-bottom: calc(328px + 240 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .intro-copy-container {
    padding-left: 30px;
  }
}

.intro-copy-h {
  line-height: 1.25;
  letter-spacing: 0.03em;
  font-weight: 500;
  margin-bottom: 0.75em;
  white-space: nowrap;
}

.intro-copy-txt {
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040));
  line-height: 1.75;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/*------------------------------------------------ （TOP）イントロここまで ------------------------------------------------*/
/*------------------------------------------------ （TOP）私たちの事業ここから ------------------------------------------------*/
#top-our-business {
  position: relative;
}

#top-our-business::before {
  content: "";
  display: block;
  background-image: url("../img/corner-arch-left-under-505f66-24x24.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(8px + 16 * ((100vw - 400px) / 1040));
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  position: absolute;
  transform: translateY(calc(-8px + (-16) * ((100vw - 400px) / 1040)));
}

#top-our-business::after {
  content: "";
  display: block;
  background-image: url("../img/corner-arch-left-top-505f66-24x24.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(8px + 16 * ((100vw - 400px) / 1040));
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  position: absolute;
}

.top-our-business-wrapper {
  width: calc(100% - 10px);
  background: #505f66;
  color: #fff;
  padding-left: calc(20px + 60 * ((100vw - 400px) / 1040));
  padding-right: calc(20px + 80 * ((100vw - 400px) / 1040));
  padding-top: calc(72px + 48 * ((100vw - 400px) / 1040));
  padding-bottom: calc(72px + (-52) * ((100vw - 400px) / 1040));
  box-sizing: border-box;
  border-radius: 0 calc(8px + 16 * ((100vw - 400px) / 1040)) calc(8px + 16 * ((100vw - 400px) / 1040)) 0;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .top-our-business-wrapper {
    width: 100%;
    border-radius: 0;
  }
}

@media screen and (max-width: 400px) {
  .top-our-business-wrapper {
    padding-bottom: calc(72px + 88 * ((100vw - 400px) / 1040));
  }
}

.section-h-group {
  font-size: calc(48px + 32 * ((100vw - 400px) / 1040));
  margin-bottom: calc(48px + 12 * ((100vw - 400px) / 1040));
}

.section-tag-h {
  font-size: calc(12px + 4 * ((100vw - 400px) / 1040));
  opacity: 0.75;
  line-height: 1;
  font-weight: 500;
}

.section-h {
  margin-bottom: 0.125em;
  line-height: 1.5;
}

.section-h-lead {
  font-size: calc(16px + 4 * ((100vw - 400px) / 1040));
  line-height: 1.5;
}

.wire-car-container {
  display: flex;
  position: relative;
  transform: translateX(calc(-20px + (-60) * ((100vw - 400px) / 1040)));

}

@media screen and (max-width: 768px) {
  .wire-car-container {
    flex-direction: column;
    width: calc(100% + (40px + 120 * ((100vw - 400px) / 1040)));
  }
}

.wire-car-block {
  width: calc(400px + 490 * ((100vw - 400px) / 1040));
  position: relative;
}

@media screen and (max-width: 768px) {
  .wire-car-block {
    width: 100%;
  }
}

.wire-car-car-img-box {
  width: 100%;
  position: absolute;
  top: 3%;
  left: 0;
}

@media screen and (max-width: 768px) {
  .wire-car-car-img-box {
    top: -3%;
  }
}

.wire-car-car {
  width: 100%;
  object-fit: cover;
  opacity: 0.75;
}

.wire-car-car-pc {
  display: block;
}

.wire-car-car-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .wire-car-car-pc {
    display: none;
  }

  .wire-car-car-sp {
    display: block;
  }
}

.wire-car-air-box-l {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: -3%;
}

.wire-car-air-box-r {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: -3%;
}

.wire-car-air-box img {
  object-fit: contain;
  width: 100%;
}

.wire-car-air-sp {
  display: none;
  transform-origin: top;
}

.wire-car-air-pc {
  display: block;
}

@media screen and (max-width: 768px) {

  .wire-car-air-box {
    top: 0%;
  }

  .wire-car-air-sp {
    display: block;
  }

  .wire-car-air-pc {
    display: none;
  }
}

.glow-dot-box {
  position: absolute;
  border-left: 1px dashed rgba(255, 255, 255, 1);
  border-bottom: 1px dashed rgba(255, 255, 255, 1);
}

.glow-dot-box-l {
  width: calc(249px + 208 * ((100vw - 769px) / 671));
  height: calc(9px + 86.5 * ((100vw - 369px) / 671));
  top: calc(64px + 33 * ((100vw - 369px) / 671));
  right: 0;
}

@media screen and (max-width: 768px) {
  .glow-dot-box-l {
    width: calc(32px + 68 * ((100vw - 400px) / 368));
    height: calc(240px + 248 * ((100vw - 400px) / 368));
    top: unset;
    right: calc(180px + 120 * ((100vw - 400px) / 368));
    bottom: calc(80px + 40 * ((100vw - 400px) / 368));
  }
}


.glow-dot-box-r {
  width: calc(184px + 152 * ((100vw - 769px) / 671));
  height: calc(32px + 40 * ((100vw - 769px) / 671));
  top: calc(112px + 80 * ((100vw - 769px) / 671));
  right: 0;
}

@media screen and (max-width: 768px) {
  .glow-dot-box-r {
    width: calc(56px + 46 * ((100vw - 400px) / 368));
    height: calc(72px + 78 * ((100vw - 400px) / 368));
    top: unset;
    right: calc(156px + 140 * ((100vw - 400px) / 368));
    bottom: calc(196px + 172 * ((100vw - 400px) / 368));
    transform: scaleX(-1);
  }
}

.glow-dot {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

/* 共通 */
.glow-dot span {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* 中央の実体 */
.core {
  width: 8px;
  height: 8px;
  background: #30adf0;
  z-index: 4;
  animation: corePulse 1.6s ease-in-out infinite;
}

/* グロー1 */
.glow-1 {
  width: 8px;
  height: 8px;
  background: rgba(48, 173, 240, 1);
  filter: blur(2px);
  box-shadow: 0 0 0px 2px #30adf0;
  z-index: 3;
  animation: glow1 1.6s ease-in-out infinite;
}

/* グロー2 */
.glow-2 {
  width: 16px;
  height: 16px;
  background: rgba(48, 173, 240, 0.75);
  filter: blur(4px);
  box-shadow: 0 0 0px 4px #30adf0;
  z-index: 2;
  animation: glow2 1.6s ease-in-out infinite;
}

/* グロー3 */
.glow-3 {
  width: 40px;
  height: 40px;
  background: rgba(48, 173, 240, 0.5);
  filter: blur(8px);
  box-shadow: 0 0 0px 10px #30adf0;
  z-index: 1;
  animation: glow3 1.2s ease-in-out infinite;
}

@keyframes corePulse {

  0%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes glow1 {

  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  50% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes glow2 {

  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }

  50% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes glow3 {

  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }

  50% {
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(1);
  }
}

.wire-car-road {
  width: 100%;
  object-fit: cover;
}

.wire-car-road-pc {
  display: block;
}

.wire-car-road-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .wire-car-road-pc {
    display: none;
  }

  .wire-car-road-sp {
    display: block;
  }
}

.wire-car-ab-name {
  font-size: calc(14px + 6 * ((100vw - 400px) / 1040));
  text-align: center;
  line-height: 1.5;
  margin-top: 0.5em;
}

.wire-car-ab-block {
  width: calc(160px + 260 * ((100vw - 400px) / 1040));
  margin-top: 10%;
}

@media screen and (max-width: 768px) {
  .wire-car-ab-block {
    position: absolute;
    right: calc(20px + 80 * ((100vw - 400px) / 1040));
    bottom: -10%;
    width: calc(160px + 260 * ((100vw - 400px) / 1040));
    margin-top: 0%;
  }
}

.wire-car-ab-img {
  width: 100%;
  object-fit: cover;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.top-our-business-exp-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(24px + 56 * ((100vw - 400px) / 1040));
  transform: translateY(calc(0px + (-140) * ((100vw - 400px) / 1040)));
}


@media screen and (max-width: 1040px) {
  .top-our-business-exp-container {
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
  .top-our-business-exp-container {
    flex-direction: column;
    transform: translateY(0);
    padding-top: calc(10% + (48px + 0 * ((100vw - 400px) / 1040)));
  }
}

.top-our-business-exp-img-block {
  width: calc(360px + 200 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .top-our-business-exp-img-block {
    width: 100%;
  }
}

.top-our-business-exp-img {
  width: 100%;
  object-fit: cover;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.top-our-business-exp-container .exp-copy-block {
  width: calc(360px + 200 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .top-our-business-exp-container .exp-copy-block {
    width: 100%;
  }
}

.top-our-business-exp-h {
  font-size: calc(32px + 24 * ((100vw - 400px) / 1040));
  line-height: 1.25;
  margin-bottom: 0.75em;
  letter-spacing: 2%;
}

@media screen and (max-width: 768px) {
  .top-our-business-exp-h {
    margin-bottom: 1em;
  }
}

.top-our-business-exp-txt {
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040));
  line-height: 1.75;
  letter-spacing: 2%;
  font-weight: 300;
}

/*------------------------------------------------ （TOP）私たちの事業ここまで ------------------------------------------------*/
/*------------------------------------------------ （TOP）下層リンク集ここから ------------------------------------------------*/
.sub-links-wrapper {
  padding: 0 calc(20px + 60 * ((100vw - 400px) / 1040));
  padding-top: calc(72px + 48 * ((100vw - 400px) / 1040));
  padding-bottom: calc(96px + 64 * ((100vw - 400px) / 1040));
}



.links-list-group {
  width: calc(360px + 600 * ((100vw - 400px) / 1040));
  border-top: 1px solid rgba(128, 152, 165, 0.15);
  margin-left: auto;
  position: relative;
}

@media screen and (max-width: 1040px) {

  .links-list-group {
    width: 100%;
  }
}

.links-list {
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid rgba(128, 152, 165, 0.15);
  padding: calc(36px + 36 * ((100vw - 400px) / 1040)) 0;
}

@media screen and (max-width: 1040px) {
  .links-list {
    gap: calc(24px + 96 * ((100vw - 400px) / 1040));
  }
}


.links-list-img-block {
  width: calc(80px + 200 * ((100vw - 400px) / 1040));
  position: absolute;
  top: 0;
  left: calc(-160px + (-200) * ((100vw - 400px) / 1040));
  opacity: 0;
  visibility: hidden;
  transition: 0.6s ease;
}

@media screen and (max-width: 1280px) {
  .links-list-img-block {
    left: calc(-120px + (-200) * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 1040px) {
  .links-list-img-block {
    position: static;
    opacity: 1;
    visibility: unset;
  }
}

.links-list-img {
  width: 100%;
  object-fit: cover;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}



.links-list-img-block-0 {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 1040px) {
  .links-list-img-block-0 {
    display: none;
  }
}


.links-list:hover .links-list-img-block-1 {
  opacity: 1;
  visibility: visible;
}

.links-list:hover .links-list-img-block-2 {
  opacity: 1;
  visibility: visible;
}

.links-list:hover .links-list-img-block-3 {
  opacity: 1;
  visibility: visible;
}

.links-list-block {
  width: 100%;
  display: flex;
  font-size: calc(28px + 20 * ((100vw - 400px) / 1040));
  justify-content: space-between;
  transition: 0.6s ease;
  opacity: 1;
  align-items: center;
}

@media (hover: hover) {
  .links-list:hover .links-list-block {
    width: 99%;
  }
}

.links-tag-h {
  font-size: calc(12px + 4 * ((100vw - 400px) / 1040));
  color: #008cd6;
}

.links-h {
  font-weight: 500;
  margin-top: 0.25em;
}

.top-view-more-btn {
  font-size: calc(14px + 6 * ((100vw - 400px) / 1040));
  line-height: 1.5;
  padding-left: 1em;
  padding-right: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
  background: #485860;
  color: #fff;
  border-radius: 9999px;
  display: inline-flex;
  column-gap: 0.75em;
  width: auto;
  transition: 0.4s ease;
}

.top-view-more-btn .round-arrow-circle {
  overflow: hidden;
  background-image: url(../img/inner-icon-008CD6-14x14.svg), url(../img/inner-icon-008CD6-14x14.svg);
  background-size: 0;
  background-position: center center, calc(50% - 1.3em) center;
  background-repeat: no-repeat;
}


@media screen and (max-width: 1040px) {
  .top-view-more-btn {
    background: #008cd6;
  }
}

@media screen and (max-width: 1040px) {
  .top-view-more-btn .round-arrow-circle {
    width: calc(21px + 9 * ((100vw - 400px) / 1040));
    height: calc(21px + 9 * ((100vw - 400px) / 1040));
    background-size: 0.7em;
    background-position: calc(50% + 1.3em) center, center center;
  }
}


@media (hover: hover) {
  .top-view-more-btn:hover {
    background: #008cd6;
  }

  @media screen and (max-width: 1040px) {
    .top-view-more-btn .round-arrow-circle {
      background-color: #fff;
    }
  }
}

@media (hover: hover) {
  .top-view-more-btn:hover .round-arrow-circle {
    width: calc(21px + 9 * ((100vw - 400px) / 1040));
    height: calc(21px + 9 * ((100vw - 400px) / 1040));
    background-size: 0.7em;
    background-position: calc(50% + 1.3em) center, center center;
  }
}


@media (hover: hover) {
  .links-list:hover .top-view-more-btn {
    pointer-events: none;
    background: #008cd6;
  }
}

@media (hover: hover) {
  .links-list:hover .round-arrow-circle {
    width: 100%;
    height: 100%;
  }
}


@media screen and (max-width: 768px) {
  .links-list .top-view-more-btn {
    padding-right: 1em;
    background: transparent;
  }

  .links-list:hover .top-view-more-btn {
    pointer-events: none;
    background: transparent;
  }
}

@media screen and (max-width: 768px) {
  .links-list .top-view-more-btn p {
    display: none;
  }
}

@media (hover: hover) {
  .links-list:hover .round-arrow-circle {
    background-size: 0.7em;
    background-position: calc(50% + 1.3em) center, center center;
  }
}


@media screen and (max-width: 1040px) {
  .links-list .round-arrow-circle {
    background-size: .7em;
    background-position: center center, calc(50% + 1.3em) center;
  }
}


@media screen and (max-width: 1040px) {
  .links-list:hover .round-arrow-circle {
    background-position: center center, calc(50% + 1.3em) center;
  }
}

@media screen and (max-width: 768px) {
  .links-list .round-arrow-circle {
    background-image: url(../img/inner-icon-fff-14x14.svg), url(../img/inner-icon-fff-14x14.svg);
    background-color: #008cd6;
  }
}

/*------------------------------------------------ （TOP）下層リンク集ここまで ------------------------------------------------*/
/*------------------------------------------------ （TOP）製品情報ここから ------------------------------------------------*/
.top-products-wrapper {
  width: calc(100% - 10px);
  background: #fff;
  padding-bottom: 7.4%;
}

@media screen and (max-width: 768px) {
  .top-products-wrapper {
    width: 100%;
  }
}

.top-products-wrapper .section-h-group {
  margin-left: calc(20px + 60 * ((100vw - 400px) / 1040));
}

.top-products-wrapper .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

#top-products .top-products-cover-block {
  width: 100%;
  position: relative;
}

@media screen and (max-width: 768px) {
  #top-products .products-cover-swiper {
    aspect-ratio: 5/ 4;
  }
}

.kv-border-mask {
  display: block;
  width: 100%;
  margin: 0 auto;
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  background: #fff;
  position: absolute;
  bottom: 0;
  border-radius: 24px 0 0 0;
  z-index: 1;
}

.kv-border-mask::before {
  content: "";
  display: block;
  background-image: url("../img/corner-arch-right-under-fff-24x24.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(8px + 16 * ((100vw - 400px) / 1040));
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  transform: translateY(calc(-8px - 16 * ((100vw - 400px) / 1040)));
  margin-left: auto;
  z-index: 8888;
}

@media screen and (max-width: 768px) {
  #top-products .top-products-cover-block .kv-border-mask::before {
    display: none;
  }
}

#top-products .top-products-cover-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 calc(8px + 16 * ((100vw - 400px) / 1040)) 0 0;
}

@media screen and (max-width: 768px) {
  #top-products .top-products-cover-block img {
    border-radius: 0;
  }
}

/*-- TOP製品紹介セクション --*/
#top-products .top-products-exp-container {
  background: #505f66;
  color: #fff;
  padding: calc(60px + 20 * ((100vw - 400px) / 1040)) calc(30px + 50 * ((100vw - 400px) / 1040));
  border-radius: calc(8px + 16 * ((100vw - 400px) / 1040));
  margin-right: calc(10px + 60 * ((100vw - 400px) / 1040));
  margin-left: calc(10px + 70 * ((100vw - 400px) / 1040));
  transform: translateY(-6.8%);
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  display: flex;
  position: relative;
  z-index: 1111;
  font-size: calc(48px + 16 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1280px) {
  #top-products .top-products-exp-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
  #top-products .top-products-exp-container {
    gap: 1em;
    margin-right: calc(10px + 70 * ((100vw - 400px) / 1040));
  }
}


#top-products .products-exp-copy-block {
  width: calc(340px + 100 * ((100vw - 400px) / 1040));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media screen and (max-width: 1280px) {
  #top-products .products-exp-copy-block {
    order: 2;
  }
}


@media screen and (max-width: 1040px) {
  #top-products .products-exp-copy-block {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  #top-products .products-exp-copy-block {
    width: auto;
    order: 2;
  }
}

#top-products .products-exp-h-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media screen and (max-width: 1280px) {
  #top-products .products-exp-h-group {
    height: calc(218px + 146 * ((100vw - 769px) / 511));
    justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  #top-products .products-exp-h-group {
    aspect-ratio: unset;
    width: 100%;
    height: auto;
    justify-content: flex-start;
  }
}

.products-exp-h {
  margin-bottom: calc(40px + 24 * ((100vw - 400px) / 1040));
  line-height: 1.1;
}

@media screen and (max-width: 1280px) {
  .products-exp-h {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 1040px) {
  .products-exp-h {
    margin-bottom: calc(40px + 24 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 768px) {
  .products-exp-h {
    margin-bottom: 0;
  }
}

.products-exp-tag-h {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  margin-bottom: calc(15px + 9 * ((100vw - 400px) / 1040));
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .products-exp-tag-h {
    padding-top: 0;
  }
}

@media screen and (max-width: 1040px) {
  .products-exp-desc-block {
    padding-top: calc(48px + 32 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 768px) {
  .products-exp-desc-block {
    padding-top: 0;
  }
}

.products-exp-lead-h {
  font-size: calc(18px + 6 * ((100vw - 400px) / 1040));
  font-weight: 500;
  margin-bottom: 1.25em;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 1040px) {
  .products-exp-lead-h {
    margin-top: 1.25em;
  }
}

@media screen and (max-width: 768px) {
  .products-exp-lead-h {
    margin-top: 0;
  }
}

.products-exp-txt {
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040));
  line-height: 1.75;
  letter-spacing: 0.02em;
  margin-bottom: calc(36px + 24 * ((100vw - 400px) / 1040));
}

@media screen and (max-width:1040px) {
  #top-products .top-view-more-btn {
    margin: 0 auto;
  }
}


/*-- TOP製品紹介スライダー --*/
#top-products .products-img-container {
  width: calc(340px + 220 * ((100vw - 400px) / 1040));
  position: absolute;
  right: calc(20px + 50 * ((100vw - 400px) / 1040));
  top: calc(60px + 20 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1280px) {
  #top-products .products-img-container {
    width: 40%;
    top: 50%;
    transform: translateY(-50%) !important;
  }
}

@media screen and (max-width: 1040px) {
  #top-products .products-img-container {
    width: 40%;
    top: calc(60px + 20 * ((100vw - 400px) / 1040));
    transform: unset !important;
  }
}

@media screen and (max-width: 768px) {
  #top-products .products-img-container {
    position: static;
    margin-left: 0;
    margin-right: auto;
    width: 100%;
    order: 1;
  }
}


.products-swiper {
  width: 100%;
  margin-right: 0 !important;
  aspect-ratio: 4 / 3;
}

@media screen and (max-width: 1280px) {
  .products-swiper {
    width: 100%;
    margin-right: 0 !important;
    aspect-ratio: 5 / 4;
  }
}

@media screen and (max-width: 768px) {
  .products-swiper {
    aspect-ratio: 4 / 3;
  }
}



.products-swiper .swiper-wrapper {
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  overflow: hidden;
}

.products-swiper .swiper-slide {
  width: 100%;
}

.products-swiper .swiper-slide img {
  width: 100%;
  object-fit: cover;
}



/*------------------------------------------------ （TOP）製品情報ここまで ------------------------------------------------*/
/*------------------------------------------------ （TOP）OPW技術ここから ------------------------------------------------*/
#top-opw {
  position: relative;
}

#top-opw::before {
  content: "";
  display: block;
  background-image: url(../img/corner-arch-left-under-505f66-24x24.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(8px + 16 * ((100vw - 400px) / 1040));
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  position: absolute;
  transform: translateY(calc(-8px + (-16) * ((100vw - 400px) / 1040)));
}

#top-opw::after {
  content: "";
  display: block;
  background-image: url(../img/corner-arch-left-top-505f66-24x24.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(8px + 16 * ((100vw - 400px) / 1040));
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  position: absolute;
}

.top-opw-wrapper {
  width: calc(100% - 10px);
  padding-top: calc(72px + 48 * ((100vw - 400px) / 1040));
  padding-bottom: calc(72px + 48 * ((100vw - 400px) / 1040));
  padding-left: calc(20px + 60 * ((100vw - 400px) / 1040));
  padding-right: calc(20px + 50 * ((100vw - 400px) / 1040));
  box-sizing: border-box;
  background: #505f66;
  color: #fff;
  border-radius: 0 calc(8px + 16 * ((100vw - 400px) / 1040)) calc(8px + 16 * ((100vw - 400px) / 1040)) 0;
}

@media screen and (max-width: 768px) {
  .top-opw-wrapper {
    width: 100%;
    border-radius: 0;
    padding-right: calc(20px + 60 * ((100vw - 400px) / 1040));
  }
}

.top-opw-wrapper .section-h-group {
  margin-bottom: calc(27px + 9 * ((100vw - 400px) / 1040));
}

.top-opw-wrapper .section-h-box {
  display: flex;
  gap: 0.375em;
  align-items: flex-end;
  margin-bottom: 1em;
}

.top-opw-wrapper .section-h-lavel {
  font-size: 0.51em;
  line-height: 1.25;
  margin-bottom: 0.6em;
}

.top-opw-cover-container {
  position: relative;
  width: 100%;
}

.opw-swiper {
  width: 100%;
}

.opw-swiper .swiper-wrapper {
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  overflow: hidden;
  aspect-ratio: 2 / 1;
}

@media screen and (max-width: 768px) {
  .opw-swiper .swiper-wrapper {
    border-radius: calc(4px + 4 * ((100vw - 400px) / 1040)) 0 0 calc(4px + 4 * ((100vw - 400px) / 1040));
    aspect-ratio: 4 / 3;
  }

  #top-opw .opw-swiper .swiper-wrapper {
    border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  }
}

.opw-swiper .swiper-slide {
  width: 100%;
}

.opw-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.top-opw-focus-img-box {
  display: none;
}

.top-opw-focus-img-box img {
  width: 100%;
  object-fit: cover;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.top-opw-exp-copy-block {
  margin: 0 auto;
  width: calc(360px + 200 * ((100vw - 400px) / 1040));
  text-align: center;
}

@media screen and (max-width: 768px) {
  .top-opw-exp-copy-block {
    width: 100%;
  }
}

.top-opw-exp-txt {
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040));
  line-height: 2;
  margin: auto 0;
  margin-top: calc(47px + 13 * ((100vw - 400px) / 1040));
  margin-bottom: calc(36px + 24 * ((100vw - 400px) / 1040));
}

@media screen and (max-width:1040px) {
  #top-opw .top-view-more-btn {
    margin: 0 auto;
  }
}

/*------------------------------------------------ （TOP）OPW技術ここまで ------------------------------------------------*/
/*------------------------------------------------ （TOP）Newsここから ------------------------------------------------*/
.top-news-wrapper {
  padding: calc(96px + 64 * ((100vw - 400px) / 1040)) calc(30px + 50 * ((100vw - 400px) / 1040));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.top-news-wrapper .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

.news-list-wrapper {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(128, 152, 165, 0.15);
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040));
}

.news-list {
  display: flex;
  padding: calc(1.5em + 0.17 * ((100vw - 400px) / 1040)) 0;
  border-bottom: 1px solid rgba(128, 152, 165, 0.15);
  column-gap: calc(40px + 40 * ((100vw - 400px) / 1040));
  align-items: center;
  min-height: 3.75em;
  box-sizing: content-box;
  transition: 0.4s ease;
  opacity: 1;
  position: relative;
}

.news-list::before {
  content: "";
  height: 1px;
  width: 0%;
  background: #142833;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.4s;
}

@media screen and (max-width: 1040px) {
  .news-list {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.5em;
  }
}

@media (hover: hover) {
  .news-list.is-link:hover::before {
    width: 100%;
  }
}

.news-lavel {
  display: flex;
}

.news-date {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  color: rgba(128, 152, 165, 0.75);
  width: calc(72px + 48 * ((100vw - 400px) / 1040));
}

.news-cat {
  background: #008cd6;
  color: #fff;
  font-size: calc(12px + 2 * ((100vw - 400px) / 1040));
}

.news-txt-block {
  width: 100%;
  display: flex;
  column-gap: calc(40px + 40 * ((100vw - 400px) / 1040));
  justify-content: space-between;
  align-items: center;
  line-height: 2;
}

.news-title {
  line-height: calc(150% + 25% * ((100vw - 400px) / 1040));
}

@media (hover: hover) {
  .news-list.is-link:hover .news-title {
    color: #008cd6;
  }
}


#top-news .top-view-more-btn {
  text-align: center;
  margin: 0 auto;
  margin-top: calc(36px + 24 * ((100vw - 400px) / 1040));
}


.naked-round-arrow-icon-box .round-arrow-circle-external {
  background-color: #505f66;
  background-image: url(../img/external-icon-fff-14x14.svg), url(../img/external-icon-fff-14x14.svg);
}

@media (hover: hover) {
  .news-list:hover .round-arrow-circle-external {
    background-color: #008cd6;
    background-size: 0.7em;
    background-position: calc(50% + 1.3em) calc(50% - 1.3em), center center;
    width: calc(21px + 9 * ((100vw - 400px) / 1040));
    height: calc(21px + 9 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 1040px) {
  .news-list .round-arrow-circle-external {
    background-color: #008cd6;
  }
}

@media screen and (max-width: 1040px) {
  .news-list:hover .round-arrow-circle-external {
    background-position: center center, calc(50% - 1.3em) calc(50% + 1.3em);
  }
}




/*------------------------------------------------ （TOP）Newsここまで ------------------------------------------------*/
/*------------------------------------------------ 採用情報ここから ------------------------------------------------*/

.recruit-link-wrapper {
  position: relative;
}

@media screen and (max-width: 768px) {
  .recruit-link-wrapper {
    position: relative;
    margin-bottom: calc(223px + (-5) * ((100vw - 400px) / 1040));
  }
}

.marquee-swiper {
  width: 100%;
  overflow: hidden;
  z-index: 0 !important;
}

.marquee-swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.marquee-swiper .swiper-slide {
  width: calc(540px + 540 * ((100vw - 400px) / 1040)) !important;
  height: auto;
  flex-shrink: 0;
  background: #eee;
  aspect-ratio: 3 / 2;
}

.marquee-swiper .swiper-slide {
  content: "";
  display: block;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.marquee-swiper .swiper-slide-1 {
  background-image: url(../img/recruit-slide-1.webp);
}

.marquee-swiper .swiper-slide-2 {
  background-image: url(../img/recruit-slide-2.webp);
}

.marquee-swiper .swiper-slide-3 {
  background-image: url(../img/recruit-slide-3.webp);
}

.marquee-swiper .swiper-slide-4 {
  background-image: url(../img/recruit-slide-4.webp);
}

.marquee-swiper .swiper-slide-5 {
  background-image: url(../img/recruit-slide-5.webp);
}

.marquee-swiper .swiper-slide-6 {
  background-image: url(../img/recruit-slide-6.webp);
}

.marquee-swiper .swiper-slide-7 {
  background-image: url(../img/recruit-slide-7.webp);
}

.marquee-swiper .swiper-slide-8 {
  background-image: url(../img/recruit-slide-8.webp);
}

.recruit-link-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  position: absolute;
  justify-content: center;
  text-align: center;
  top: calc(8px + 92 * ((100vw - 400px) / 1040));
  right: calc(30px + 90 * ((100vw - 400px) / 1040));
  z-index: 8888;
  padding: calc(40px + 24 * ((100vw - 400px) / 1040));
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  font-size: calc(40px + 32 * ((100vw - 400px) / 1040));
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .recruit-link-card {
    top: unset;
    right: unset;
    left: 0;
    bottom: 0;
    display: inline-block;
    text-align: left;
    border-radius: 0 0.8rem 0.8rem 0;
    transform: translateY(calc(223px + (-5) * ((100vw - 400px) / 1040)));
  }
}

.recruit-link-card .section-h-group {
  margin-bottom: 0.5em;
}

.recruit-link-card .section-h {
  margin-bottom: 0.25em;
}

.recruit-link-card .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

.recruit-link-card .section-h-lead {
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040));
}

.recruit-link-card .top-view-more-btn {
  background: #008cd6;
  margin: 0 auto;
}

.recruit-link-card .round-arrow-circle-external {
  background-image: url(../img/external-icon-008CD6-14x14.svg), url(../img/external-icon-008CD6-14x14.svg);
  background-color: #fff;
}

@media (hover: hover) {
  .recruit-link-card .top-view-more-btn:hover .round-arrow-circle-external {
    background-color: #fff;
    background-size: 0.7em;
    background-position: calc(50% + 1.3em) calc(50% - 1.3em), center center;
    width: calc(21px + 9 * ((100vw - 400px) / 1040));
    height: calc(21px + 9 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 1040px) {
  .recruit-link-card .top-view-more-btn:hover .round-arrow-circle-external {
    background-position: center center, calc(50% - 1.3em) calc(50% + 1.3em);
  }
}

/*------------------------------------------------ 採用情報ここまで ------------------------------------------------*/
/*------------------------------------------------ フッターここから ------------------------------------------------*/

.footer {
  width: 100%;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .footer-wrapper {
    padding-top: calc(20px + 20 * ((100vw - 400px) / 1040));
  }
}

/*-- フッターお問い合わせ導線 --*/
.footer-contact-container {
  width: 100%;
  position: relative;
  z-index: 1111;
  background: transparent;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .footer-contact-container {
    background: transparent;
    top: 0;
  }
}

.footer-contact-container::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  background: #0d212b;
  z-index: -1;
}

@media screen and (max-width: 768px) {
  .footer-contact-container::before {
    height: 80px;
  }
}

.contact-block {
  background: #505f66;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: calc(48px + 40 * ((100vw - 400px) / 1040)) 0;
  padding-right: calc(30px + 100 * ((100vw - 400px) / 1040));
  padding-left: calc(30px + 90 * ((100vw - 400px) / 1040));
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  margin: 0 calc(20px + 60 * ((100vw - 400px) / 1040));
  position: relative;
  top: calc(0px - 80 * ((100vw - 400px) / 1040));
  column-gap: calc(30px + 100 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1280px) {

  /*-- フッターお問い合わせ導線 --*/
  .contact-block {
    padding-right: calc(30px + 70 * ((100vw - 400px) / 1040));
    padding-left: calc(30px + 50 * ((100vw - 400px) / 1040));
    column-gap: unset;
  }
}

@media screen and (max-width: 1040px) {

  /*-- フッターお問い合わせ導線 --*/
  .contact-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {

  /*-- フッターお問い合わせ導線 --*/
  .contact-block {
    top: 0;
  }
}

.contact-block .section-h-group {
  font-size: calc(40px + 32 * ((100vw - 400px) / 1040));
  margin-bottom: 0;
  text-align: left;
}

@media screen and (max-width: 1040px) {

  /*-- フッターお問い合わせ導線 --*/
  .contact-block .section-h-group {
    margin-bottom: 0.6em;
    text-align: center;
  }
}

.contact-block .section-h-lead {
  font-size: calc(12px + 6 * ((100vw - 400px) / 1040));
  font-weight: 300;
  line-height: 1.75;
}

/*-- フッターメイン --*/
.footer-main-container {
  display: flex;
  justify-content: space-between;
  gap: calc(40px + 120 * ((100vw - 400px) / 1040));
  padding: 0 calc(30px + 90 * ((100vw - 400px) / 1040));
  padding-top: calc(80px + (40 - 80) * ((100vw - 400px) / 1040));
  background: #0d212b;
}

@media screen and (min-width: 1441px) {
  .footer-main-container {
    padding-top: calc(0px + 40 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 1040px) {
  .footer-main-container {
    flex-direction: column;
  }
}

/*-- フッターヘッダー --*/
.footer-header-block {
  width: auto;
  white-space: nowrap;
}

.footer-logo-box {
  margin-bottom: calc(30px + 34 * ((100vw - 400px) / 1040));
}

.footer-logo-box img {
  width: calc(200px + 40 * ((100vw - 400px) / 1040));
}

.location {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
}

.location-address {
  margin-bottom: 0.5em;
}

.location-map-link {
  color: #008cd6;
  text-decoration: underline;
  margin-bottom: 1em;
  display: flex;
  gap: .25em;
  transition: .2s;
}

@media (hover: hover) {
  .location-map-link:hover {
    opacity: .5;
  }
}

.call-group {
  font-size: calc(36px + 28 * ((100vw - 400px) / 1040));
}

.call-icon-box {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.1);
  padding: calc(8px + 6 * ((100vw - 400px) / 1040));
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  width: calc(48px + 40 * ((100vw - 400px) / 1040));
}

.call-icon-box img {
  width: 100%;
}

.phone-number-box {
  display: flex;
  align-items: center;
  column-gap: 0.25em;
  margin-bottom: 0.25em;
}

.phone-number {
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.07em;
}

.phone-number-recept-box {}

.phone-recept {
  font-size: calc(12px + 4 * ((100vw - 400px) / 1040));
  font-weight: 300;
  text-align: center;
}

/*-- フッターメニュー --*/
.footer-menu-block {
  width: auto;
}

@media screen and (max-width: 1040px) {
  .footer-menu-contents-group {
    flex-direction: column;
  }
}

.footer-menu-contents-group {
  display: flex;
  border-bottom: 1px solid rgba(128, 152, 165, 0.15);
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  column-gap: 2.5em;
  padding-bottom: 2.5em;
  margin-bottom: 2.5em;
  width: auto;
  justify-content: flex-start;
}

@media screen and (max-width: 1280px) {
  .footer-menu-contents-group {
    flex-direction: column;
    border: none;
    padding-bottom: 2.2em;
    margin-bottom: 2.2em;
  }
}

.footer-menu-h {
  font-size: calc(11px + 1 * ((100vw - 400px) / 1040));
  opacity: 0.5;
  width: calc(80px + 40 * ((100vw - 400px) / 1040));
  line-height: 2;
}

@media screen and (max-width: 1280px) {
  .footer-menu-h {
    width: 100%;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(128, 152, 165, 0.15);
  }
}

.footer-menu-nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2.5em;
}

.footer-menu-nav-list {
  display: block;
  white-space: nowrap;
  width: calc(140px + (120 - 140) * ((100vw - 400px) / (1440 - 400)));
}

@media screen and (min-width: 1440px) {
  .footer-menu-nav-list {
    width: calc(100px + (20) * ((100vw - 400px) / (1440 - 400)));
  }
}

@media screen and (max-width: 1280px) {
  .footer-menu-nav {
    margin-top: 2em;
    justify-content: space-between;
  }
}

@media screen and (max-width:768px) {
  .footer-menu-nav {
    margin-top: 2em;
    justify-content: flex-start;
  }
}

.footer-menu-nav-h {
  margin-bottom: 1em;
  display: flex;
  align-items: center;
  column-gap: 0.75em;
  transition: .2s ease;
}

@media (hover: hover) {
  .footer-menu-nav-h:hover {
    color: #008cd6;
  }
}

.footer-menu-nav-page-anker-list {
  font-size: calc(13px + 1 * ((100vw - 400px) / 1040));
}

.footer-menu-nav-page-anker-list a {
  margin-bottom: 1em;
  opacity: .5;
  transition: .4s ease;
}

@media (hover: hover) {
  .footer-menu-nav-page-anker-list a:hover {
    opacity: 1;
  }
}

.footer-menu-recruit-group {
  display: flex;
  border-bottom: 1px solid rgba(128, 152, 165, 0.15);
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  column-gap: 2.5em;
  padding-bottom: 2.5em;
  margin-bottom: 0;
}

@media screen and (max-width: 1280px) {
  .footer-menu-recruit-group {
    flex-direction: column;
    padding-bottom: 2.2em;
  }
}

.footer-menu-recruit-group .footer-menu-nav {
  align-items: center;
  justify-content: unset;
}

.footer-menu-recruit-group .footer-menu-nav-h {
  margin-bottom: 0;
}

.footer-menu-recruit-group .footer-menu-nav-page-anker-box {
  display: flex;
  gap: calc(10px + 30 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .footer-menu-recruit-group .footer-menu-nav-page-anker-box {
    flex-direction: column;
  }
}

.footer-menu-recruit-group .footer-menu-nav-page-anker-list a {
  margin-bottom: 0;
  display: flex;
  column-gap: .25em;
}

.footer-menu-nav-page-anker-list-icon-box {
  width: .75em;
  height: .75em;
  margin-top: .25em;
  overflow: hidden;
  background-image: url(../img/external-icon-fff-10x10.svg), url(../img/external-icon-fff-10x10.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center, calc(50% - .75em) calc(50% + .75em);
  transition: background-position 0.3s;
}

@media (hover: hover) {
  .footer-menu-recruit-group .footer-menu-nav-page-anker-list a:hover .footer-menu-nav-page-anker-list-icon-box {
    background-position: calc(50% + .75em) calc(50% - .75em), center center;
  }
}

@media screen and (max-width: 1040px) {
  .footer-menu-recruit-group .footer-menu-nav-page-anker-list a:hover .footer-menu-nav-page-anker-list-icon-box {
    background-position: center center, calc(50% - .75em) calc(50% + .75em);
  }
}

.footer-menu-recruit-group .round-arrow-icon-box {
  width: calc(20px + 4 * ((100vw - 400px) / 1040));
  height: calc(20px + 4 * ((100vw - 400px) / 1040));
  aspect-ratio: 1 / 1;
  background: #008cd6;
  border-radius: 9999px;
  overflow: hidden;
}

.footer-menu-recruit-group .round-arrow-circle {
  width: 100%;
  height: 100%;
  background-color: #008cd6;
  background-image: url(../img/external-icon-fff-10x10.svg), url(../img/external-icon-fff-10x10.svg);
  background-size: .5em;
  background-repeat: no-repeat;
  background-position: center center, calc(50% - 1em) calc(50% + 1em);
  transition: 0.3s ease;
}

@media (hover: hover) {
  .footer-menu-nav-h:hover .round-arrow-circle {
    background-position:
      calc(50% + 1em) calc(50% - 1em), center center;
  }
}

@media screen and (max-width: 1040px) {
  .footer-menu-nav-h:hover .round-arrow-circle {
    background-position: center center, calc(50% - 1em) calc(50% + 1em);
  }
}


/*-- フッターSNSアイコン・コピーライト --*/

.footer-credit-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 calc(30px + 90 * ((100vw - 400px) / 1040));
  padding-bottom: calc(80px + 40 * ((100vw - 400px) / 1040));
  background: #0d212b;
}

.sns-icon-box {
  display: flex;
  align-items: center;
  column-gap: 0.35em;
  font-size: 2rem;
  margin-top: 2.4em;
  margin-bottom: 1.2em;
  transition: .2s ease;
}

@media (hover: hover) {
  .sns-icon-box:hover {
    opacity: 0.5;
  }
}

.sns-icon-box p {
  font-size: 1.4rem;
}

.footer-copy-right {
  font-size: 1.2rem;
  opacity: 0.5;
}

/*------------------------------------------------ フッターここまで ------------------------------------------------*/
/*------------------------------------------------ ///ここから下層ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから下層ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから下層ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから下層ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから下層ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから下層ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから下層ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから下層ページ/// ------------------------------------------------*/

.lower-h-cover,
.lower-h-group,
.lower-page-navi {
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}

.is-show {
  opacity: 1;
  visibility: visible;
}

.lower-h-wrapper {
  width: 100%;
  box-sizing: border-box;
  border-radius: 0 24px 24px 0;
  padding-top: calc(120px + 80 * ((100vw - 400px) / 1040));
}

.lower-h-container {
  display: flex;
  margin-top: 0;
  margin-right: calc(30px + 90 * ((100vw - 400px) / 1040));
  margin-bottom: calc(20px + 60 * ((100vw - 400px) / 1040));
  margin-left: calc(20px + 20 * ((100vw - 400px) / 1040));
  justify-content: space-between;
  position: relative;
}

.lower-h-container .scroll-indicator {
  overflow: hidden;
  position: absolute;
  background: #e9e9e9;
  border-radius: 9999px;
  top: calc(40% + 10 * ((100vw - 400px) / 1040));
  transform: translateY(calc(-40% - 10 * ((100vw - 400px) / 1040)));
}

.lower-h-group {
  font-size: calc(56px + 40 * ((100vw - 400px) / 1040));
  line-height: 1;
  padding-left: calc(20px + 60 * ((100vw - 400px) / 1040));
}

.lower-h {
  margin-top: 0.25em;
  margin-bottom: 0.42em;
}

@media screen and (max-width: 1040px) {
  .lower-h {
    margin-bottom: 0.65em;
  }
}

.lower-tag-h {
  font-size: calc(14px + 4 * ((100vw - 400px) / 1040));
  color: #008cd6;
}

.breadcrumb {
  display: flex;
}

.breadcrumb {
  font-size: calc(12px + 2 * ((100vw - 400px) / 1040));
}

.breadcrumb li {
  position: relative;
  padding-left: 2.5em;
}

.breadcrumb li:first-child {
  padding-left: 0em;
}

.breadcrumb-link {
  color: rgba(128, 152, 165, 0.5);
}

.breadcrumb li::after {
  content: "-";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1em;
}

.breadcrumb li:first-child:after {
  content: "";
}

.lower-h-cover {
  width: calc(100% - 10px);
  height: calc(212px + 268 * ((100vw - 400px) / 1040));
  position: relative;
}

.lower-h-cover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 0 calc(8px + 16 * ((100vw - 400px) / 1040)) 0 0;
}

.lower-page-navi {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  padding: 1em;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: calc(30px + 90 * ((100vw - 400px) / 1040));
  top: calc(120px + 80 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .lower-page-navi {
    padding: 0 calc(20px + 60 * ((100vw - 400px) / 1040));
    padding-top: 1em;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 0.75em;
  }
}

.lower-page-navi-list {
  padding: 0.5em;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .lower-page-navi-list {
    width: 50%;
  }
}

.lower-page-navi-list-btn {
  display: flex;
  column-gap: 0.75em;
  color: rgba(20, 40, 51, 0.75);
}

@media (hover: hover) {
  .lower-page-navi-list-btn:hover {
    color: #008cd6;
  }
}

.lower-page-navi-list-icon-box {
  background-color: rgba(240, 240, 240, 0.75);
  padding: 0.5em;
  aspect-ratio: 1 / 1;
  display: flex;
  border-radius: 0.25em;
  overflow: hidden;
  width: 1.5em;
  box-sizing: border-box;
  background-image: url(../img/inner-down-icon-4f5e66-10x10.svg), url(../img/inner-down-icon-4f5e66-10x10.svg);
  background-size: .75em;
  background-position: center center, center calc(0% - 0.75em);
  background-repeat: no-repeat;
  transition: 0.3s;
}

@media (hover: hover) {
  .lower-page-navi-list-btn:hover .lower-page-navi-list-icon-box {
    background-position: center calc(100% + 0.75em), center center;
    background-image: url(../img/inner-down-icon-fff-10x10.svg), url(../img/inner-down-icon-fff-10x10.svg);
    background-color: #008cd6;
  }
}

.lower-page-navi-list-icon-box img {
  display: none;
}


/*------------------------------------------------ ///ここから事業内容ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから事業内容ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから事業内容ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから事業内容ページ/// ------------------------------------------------*/

/*------------------------------------------------ ///ここから事業内容イントロ/// ------------------------------------------------*/
#business-intro {
  width: 100%;
  height: auto;
  background-image: url(../img/business-intro-curve.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.business-intro-wrapper {
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0) 15%,
      rgba(255, 255, 255, 0) 85%,
      rgba(255, 255, 255, 0.8) 100%),
    url(../img/noise-fff-1440x1440-op10.webp);
  background-size: auto;
  background-position: left top;
  background-repeat: repeat;
  position: relative;
  overflow-x: hidden;
  padding-top: calc(96px + 64 * ((100vw - 400px) / 1040));
  padding-bottom: calc(248px + 472 * ((100vw - 400px) / 1040));
  padding-right: calc(20px + 100 * ((100vw - 400px) / 1040));
  padding-left: calc(20px + 60 * ((100vw - 400px) / 1040));
  box-sizing: border-box;
}



#business-intro .section-tag-h {
  color: #008cd6;
  opacity: 1;
}


#business-intro .section-h-group {
  margin-bottom: calc(84px + 20 * ((100vw - 400px) / 1040));
}

.business-intro-copy-container {
  font-size: calc(32px + 32 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .business-intro-copy-container {
    font-size: calc(32px + 32 * ((100vw - 400px) / 1040));
  }
}

.business-intro-copy-h {
  line-height: 1.35;
  letter-spacing: 0.03em;
  font-weight: 500;
  margin-bottom: calc(252px - 92 * ((100vw - 400px) / 1040));
}

@media screen and (min-width: 1441px) {
  .business-intro-copy-h {
    margin-bottom: calc(144px + 92 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 1040px) {
  .business-intro-copy-h {
    margin-bottom: calc(280px + 212 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 1040px) {
  .business-intro-copy-h {
    margin-bottom: calc(360px + 292 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 400px) {
  .business-intro-copy-h {
    margin-bottom: calc(252px + 92 * ((100vw - 400px) / 1040));
  }
}


.business-intro-copy-txt {
  line-height: 1.75;
  letter-spacing: 0.03em;
  font-weight: 500;
  margin-bottom: 0.75em;
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040));
  width: calc(320px + 200 * ((100vw - 400px) / 1040));
  margin-left: auto;
  font-weight: 400;
}

@media screen and (max-width: 400px) {
  .business-intro-copy-txt {
    width: 100%;
  }
}

.business-intro-img-block {
  position: absolute;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.business-intro-img-block img {
  width: 100%;
  object-fit: cover;
}

.business-intro-img-block-1 {
  right: 0;
  top: calc(160px + 288 * ((100vw - 400px) / 1040));
  width: calc(140px + 120 * ((100vw - 400px) / 1040));

}

.business-intro-img-block-1 img {
  border-radius: 0.8rem 0 0 0.8rem;
}

.business-intro-img-block-2 {
  left: 0;
  top: calc(386px + 483 * ((100vw - 400px) / 1040));
  width: calc(220px + 440 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1280px) {
  .business-intro-img-block-2 {
    left: calc(-40px + (-120) * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 1040px) {
  .business-intro-img-block-2 {
    left: calc(-40px + (-160) * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 768px) {
  .business-intro-img-block-2 {
    left: 0;
  }
}



.business-intro-img-block-2 img {
  border-radius: 0 0.8rem 0.8rem 0;
}



.business-intro-img-block-3 {
  right: calc(30px + 130 * ((100vw - 400px) / 1040));
  bottom: calc(56px + 104 * ((100vw - 400px) / 1040));
  width: calc(196px + 284 * ((100vw - 400px) / 1040));
}

.business-intro-img-block-3 img {
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

/*------------------------------------------------ ///ここまで（ビジネス）事業内容イントロ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから（ビジネス）数字で見る/// ------------------------------------------------*/
#business-data {
  width: 100%;
}

.business-data-wrapper {
  width: calc(100% - 20px);
  background: #f3f4f5;
  margin: 0 auto;
  padding: calc(48px + 32 * ((100vw - 400px) / 1040)) calc(10px + 60 * ((100vw - 400px) / 1040));
  box-sizing: border-box;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.small-h {
  font-size: calc(18px + 6 * ((100vw - 400px) / 1040));
  margin-bottom: 1em;
}

.notes {
  text-align: left;
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  margin-bottom: 2.5em;
}

.business-data-list-container {
  display: flex;
  gap: 0.75em;
  font-size: calc(18px + 6 * ((100vw - 400px) / 1040));
}


@media screen and (max-width: 768px) {
  .business-data-list-container {
    flex-direction: column;
  }
}

.business-data-list {
  width: 32.5%;
  background: #fff;
  padding: calc(27px - 3 * ((100vw - 400px) / 1040));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  position: relative;
  box-sizing: border-box;
  gap: 1em;
}


@media screen and (max-width: 768px) {
  .business-data-list {
    width: 100%;
  }
}

.business-data-list-h {
  width: 83.3%;
  margin-right: auto;
  height: 3em;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .business-data-list-h {
    height: 1.5em;
  }
}


.business-data-icon {
  background: #008cd6;
  color: #fff;
  display: flex;
  font-size: calc(24px + 8 * ((100vw - 400px) / 1040)) !important;
  padding: 0.5em;
  border-radius: 0.25em;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
}

.business-data-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 1em;
  box-sizing: border-box;
}


.business-data-figure {
  display: flex;
  align-items: flex-end;
  line-height: 1;
  font-weight: 600;
  column-gap: 0.5em;
  white-space: nowrap;
}

@media screen and (max-width: 1040px) {
  .business-data-figure {
    font-size: calc(56px + 32 * ((100vw - 768px) / 272));
    column-gap: 0.1em;
  }
}

@media screen and (max-width: 768px) {
  .business-data-figure {
    font-size: calc(64px + 56 * ((100vw - 400px) / 1040));
  }
}


.business-data-number {
  font-size: calc(64px + 56 * ((100vw - 400px) / 1040));
  letter-spacing: -0.05em;
}

.business-data-unit {
  font-size: calc(20px + 12 * ((100vw - 400px) / 1040));
  margin-bottom: 0.5em;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
}

.business-data-unit-front {
  justify-content: flex-end;
  align-items: center;
}

.business-data-exp {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  color: rgba(20, 40, 51, 0.75);
  width: 100%;
  text-align: left;
  height: 4.5em;
}


@media screen and (max-width: 1040px) {
  .business-data-exp {
    height: 6em;
  }
}

@media screen and (max-width: 768px) {
  .business-data-exp {
    height: 3em;
    text-align: center;
  }
}

@media screen and (max-width: 440px) {
  .business-data-exp {
    height: 4.5em;
    text-align: left;
  }
}

.business-data-exp span {
  display: inline;
}

@media screen and (max-width: 768px) {
  .business-data-exp span {
    display: inline-block;
  }
}

@media screen and (max-width: 440px) {
  .business-data-exp span {
    display: inline;
  }
}


/*------------------------------------------------ ///ここまで（ビジネス）数字で見る/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから（ビジネス）製品情報/// ------------------------------------------------*/
#business-products {
  padding: calc(72px + 88 * ((100vw - 400px) / 1040)) 0;
  height: 100%;
}



@media screen and (max-width: 768px) {
  .business-products-wrapper {
    margin-left: 0;
  }
}

.business-products-container {
  display: flex;
  justify-content: space-between;
  gap: calc(48px + 72 * ((100vw - 400px) / 1040));
  position: relative;
}

@media screen and (max-width: 768px) {
  .business-products-container {
    flex-direction: column;
    gap: 0;
  }
}

.business-products-container .products-exp-copy-block {
  width: 36.1%;
  font-size: calc(48px + 16 * ((100vw - 400px) / 1040));
  margin: 0 calc(20px + 60 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1040px) {
  .business-products-container .products-exp-copy-block {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .business-products-container .products-exp-copy-block {
    width: auto;
    margin: 0 calc(30px + 90 * ((100vw - 400px) / 1040));
    order: 2;
  }
}



#business-products .products-img-container {
  background: #505f66;
  width: 50%;
  height: calc(866px + 34 * ((100vw - 400px) / 1040));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(8px + 16 * ((100vw - 400px) / 1040)) 0 0 calc(8px + 16 * ((100vw - 400px) / 1040));
  padding: calc(20px + 60 * ((100vw - 400px) / 1040));
  box-sizing: border-box;
  position: absolute;
  right: 0;
}

@media screen and (max-width: 1040px) {
  #business-products .products-img-container {
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  #business-products .products-img-container {
    width: calc(100% - 10px);
    position: relative;
    order: 1;
    border-radius: 0 calc(8px + 16 * ((100vw - 400px) / 1040)) calc(8px + 16 * ((100vw - 400px) / 1040)) 0;
  }
}

#business-products .products-img-container::after {
  content: "";
  display: block;
  background-image: url(../img/corner-arch-right-top-505f66-24x24.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(8px + 16 * ((100vw - 400px) / 1040));
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  position: absolute;
  right: 0;
  bottom: calc(-8px + (-16) * ((100vw - 400px) / 1040));
}


@media screen and (max-width: 768px) {
  #business-products .products-img-container::after {
    content: "";
    display: block;
    background-image: url(../img/corner-arch-left-top-505f66-24x24.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: calc(8px + 16 * ((100vw - 400px) / 1040));
    height: calc(8px + 16 * ((100vw - 400px) / 1040));
    position: absolute;
    left: 0;
    bottom: calc(-8px + (-16) * ((100vw - 400px) / 1040));
  }
}


#business-products .products-swiper {
  width: 100%;
  margin-right: 0 !important;
  aspect-ratio: 4 / 3;
}

#business-products .products-swiper .swiper-wrapper {
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  overflow: hidden;
}

#business-products .products-swiper .swiper-slide {
  width: 100%;
}

#business-products .products-swiper .swiper-slide img {
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1040px) {
  #business-products .products-swiper {
    width: 100%;
    padding: 0;
  }
}


#business-products .section-h-group {
  font-size: calc(48px + 8 * ((100vw - 400px) / 1040));
  margin-bottom: 1em;
  position: absolute;
  left: calc(20px + 60 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  #business-products .section-h-group {
    position: static;
    margin-left: calc(20px + 60 * ((100vw - 400px) / 1040));
  }
}

#business-products .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

#business-products .section-h {
  margin-bottom: 0;
  line-height: 1.5;
}



#business-products .products-exp-h-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}

@media screen and (max-width: 768px) {
  #business-products .products-exp-h-group {
    aspect-ratio: unset;
    width: 100%;
    margin: 1em 0;
  }
}

#business-products .products-exp-tag-h {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  margin-bottom: 1.5em;
  padding-top: calc(132px + 64 * ((100vw - 400px) / 1040));
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  #business-products .products-exp-tag-h {
    padding-top: 0;
  }
}

#business-products .products-exp-h {
  margin-bottom: 1.25em;
  line-height: 1.1;
}


@media screen and (max-width: 1040px) {
  #business-products .products-exp-h {
    margin-bottom: 0;
  }

}

/*------------------------------------------------ ///ここまで（ビジネス）製品情報/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから（ビジネス）OPW技術について/// ------------------------------------------------*/

#business-opw::before {
  content: "";
  display: block;
  background-image: url(../img/corner-arch-left-under-505f66-24x24.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(8px + 16 * ((100vw - 400px) / 1040));
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  position: absolute;
  transform: translateY(calc(-8px + (-16) * ((100vw - 400px) / 1040)));
}

#business-opw::after {
  content: "";
  display: block;
  background-image: url(../img/corner-arch-left-top-505f66-24x24.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(8px + 16 * ((100vw - 400px) / 1040));
  height: calc(8px + 16 * ((100vw - 400px) / 1040));
  position: absolute;
}

.business-opw-wrapper {
  width: calc(100% - 10px);
  margin-right: auto;
  background: #505f66;
  color: #fff;
  border-radius: 0 calc(8px + 16 * ((100vw - 400px) / 1040)) calc(8px + 16 * ((100vw - 400px) / 1040)) 0;
  background-image: url(../img/opw-curve.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: calc(72px + 48 * ((100vw - 400px) / 1040)) calc(20px + 60 * ((100vw - 400px) / 1040));
  ;
}

@media screen and (max-width: 768px) {
  .business-opw-wrapper {
    width: 100%;
    border-radius: 0;
  }
}


.business-opw-wrapper .section-h-box {
  display: flex;
  gap: 0.375em;
  align-items: flex-end;
  margin-bottom: 1em;
}

.business-opw-wrapper .section-h-lavel {
  font-size: 0.51em;
  line-height: 1.25;
  margin-bottom: 0.6em;
}

.business-opw-exp-container {
  display: flex;
  justify-content: flex-start;
  gap: calc(60px + 20 * ((100vw - 400px) / 1040));
  margin-bottom: calc(72px + 48 * ((100vw - 400px) / 1040));
  font-size: calc(32px + 24 * ((100vw - 400px) / 1040));
  align-items: flex-start;
}

@media screen and (max-width: 1280px) {
  .business-opw-exp-container {
    flex-direction: column;
  }
}

.business-opw-exp-container .exp-copy-block {
  width: calc(360px + 120 * ((100vw - 400px) / 1040));
}


@media screen and (max-width: 1280px) {
  .business-opw-exp-container .exp-copy-block {
    width: 100%;
    order: 2;
  }
}

.business-opw-exp-container .opw-swiper {
  width: calc(360px + 360 * ((100vw - 400px) / 1040));
  height: auto;
  aspect-ratio: 8 / 5;
  order: 1;
}

.business-opw-exp-container .opw-swiper .swiper-wrapper {
  width: 100% !important;
}


.business-opw-exp-container .opw-swiper .swiper-slide {
  width: 100% !important;
}

.business-opw-exp-container .opw-swiper .swiper-slide img {
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1280px) {
  .business-opw-exp-container .opw-swiper {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .business-opw-exp-container .opw-swiper {
    width: calc(100% + 20px + 60 * ((100vw - 400px) / 1040));
    left: 0;
  }
}

/*-- OPWの特徴 --*/

.business-opw-feature-container .small-h {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 1em;
  margin-bottom: 3.75em;
}

.opw-feature-list-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 9.45%;
  row-gap: 4em;
  font-size: calc(20px + 4 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .opw-feature-list-block {
    flex-wrap: nowrap;
    flex-direction: column;
    row-gap: 0;
  }
}

.opw-feature-list {
  width: 43.8%;
  display: flex;
  flex-direction: column;
  row-gap: 0.75em;
}

@media screen and (max-width: 768px) {
  .opw-feature-list {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
  }
}



@media screen and (max-width: 768px) {
  .opw-feature-list-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.list-number {
  font-size: calc(12px + 2 * ((100vw - 400px) / 1040));
  font-weight: 500;
}

.opw-feature-list .list-number {
  opacity: 0.75;
}

.opw-feature-list-img-box {
  width: calc(160px + 400 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .opw-feature-list-img-box {
    order: 2;
  }
}

.opw-feature-list-img-box img {
  width: 100%;
  object-fit: cover;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.opw-feature-list-h-group {
  text-align: right;
  position: relative;
}

@media screen and (max-width: 768px) {
  .opw-feature-list-h-group {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 1;
    margin-left: 1em;
    margin-right: auto;
    width: 33.3%;
  }
}

.opw-feature-list-tag-h {
  font-size: calc(12px + 4 * ((100vw - 400px) / 1040));
  opacity: 0.5;
}

.opw-feature-mark-box {
  position: absolute;
  bottom: 1.25em;
  left: -1.2em;
  width: calc(64px + 104 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .opw-feature-mark-box {
    position: static;
    margin-bottom: 1em;
  }
}

.opw-feature-mark-box img {
  width: 100%;
  object-fit: cover;
}

/*------------------------------------------------ ///ここまで（ビジネス）OPW技術について/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから（ビジネス）製造の流れ/// ------------------------------------------------*/

.process-flow-wrapper {
  padding: calc(96px + 64 * ((100vw - 400px) / 1040)) calc(20px + 60 * ((100vw - 400px) / 1040));
  padding-top: calc(72px + 88 * ((100vw - 400px) / 1040));
}

#process-flow .section-h-group {
  margin-bottom: calc(48px + 32 * ((100vw - 400px) / 1040));
}


#process-flow .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

#process-flow .section-h-lead {
  opacity: 0.9;
}

.process-flow-container {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 9.38%;
  column-gap: calc(20px + 60 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .process-flow-container {
    flex-direction: column;
  }
}

.process-flow-nav-block {
  width: calc(158px + 42 * ((100vw - 400px) / 1040));
  background: #f9f9fa;
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  position: sticky;
  left: 0;
  top: 5.6%;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .process-flow-nav-block {
    display: none;
  }
}

.process-flow-nav-list-btn {
  display: flex;
  align-items: center;
  column-gap: 0.75em;
  padding: 0.75em;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.process-flow-nav-list.is-active .process-flow-nav-list-btn {
  background: #008cd6;
  color: #fff;
}

.process-flow-nav-list.is-active .list-number {
  color: #fff;
}

.process-flow-nav-list-line {
  width: 100%;
  display: block;
  background: rgba(128, 152, 165, 0.15);
  height: 1px;
  margin: 0.25em 0;
}

.process-flow-nav-list .list-number {
  color: #008cd6;
  font-size: calc(10px + 2 * ((100vw - 400px) / 1040));
}

.process-flow-list-block {
  width: calc(360px + 640 * ((100vw - 400px) / 1040));
  margin-left: auto;
  font-size: calc(20px + 12 * ((100vw - 400px) / 1040));
  border-top: 1px solid rgba(20, 40, 51, 0.1);
}

@media screen and (max-width: 768px) {
  .process-flow-list-block {
    width: 100%;
  }
}

.process-flow-list {
  border-bottom: 1px solid rgba(20, 40, 51, 0.1);
  padding: 1.25em 0;
}

.process-flow-list .list-number {
  color: #008cd6;
  margin-bottom: 1em;
}

.process-flow-list-h-group {
  width: 72%;
  padding: 0 calc(20px + 20 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .process-flow-list-h-group {
    order: 2;
  }
}


.process-flow-list-h {
  margin-bottom: 0.5em;
  font-weight: 500;
}

.process-flow-list-h-lead {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  opacity: 0.75;
}

.process-flow-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.process-flow-list-img-box {
  width: calc(120px + 160 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .process-flow-list-img-box {
    order: 1;
  }
}


.process-flow-list-img-box img {
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  width: 100%;
  object-fit: cover;
}

/*------------------------------------------------ ///ここまで（ビジネス）製造の流れ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから（ビジネス）体制と設備/// ------------------------------------------------*/
.process-flow-equipment-container {
  background: #f3f4f5;
  display: flex;
  justify-content: flex-start;
  padding: calc(30px + 50 * ((100vw - 400px) / 1040));
  padding-bottom: calc(56px + 64 * ((100vw - 400px) / 1040));
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  column-gap: calc(40px + 80 * ((100vw - 400px) / 1040));
}

@media screen and (min-width: 1440px) {
  .process-flow-equipment-container {
    column-gap: calc(40px + 120 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 1040px) {
  .process-flow-equipment-container {
    flex-direction: column;
  }
}

.process-flow-equipment-container .section-h-group {
  font-size: calc(28px + 12 * ((100vw - 400px) / 1040));
  white-space: nowrap;
}

.process-flow-equipment-container .section-h {
  line-height: 1.75;
  font-weight: 500;
}

.process-flow-equipment-list-block {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: calc(40px + 40 * ((100vw - 400px) / 1040));
  width: calc(360px + 360 * ((100vw - 400px) / 1040));
  font-size: calc(20px + 4 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1040px) {
  .process-flow-equipment-list-block {
    flex-direction: column;
    width: 100%;
    gap: 1.5em;
  }
}

@media screen and (max-width: 768px) {
  .process-flow-equipment-list-block {
    flex-direction: row;
  }
}

@media screen and (max-width: 618px) {
  .process-flow-equipment-list-block {
    flex-direction: column;
    gap: 2em;
  }
}


.process-flow-equipment-list {
  display: flex;
  flex-direction: column;
  width: 44.4%;
  gap: 1em;
}

@media screen and (max-width: 1040px) {
  .process-flow-equipment-list {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 768px) {
  .process-flow-equipment-list {
    flex-direction: column;
  }
}

.process-flow-equipment-list-img-box {
  width: 100%;
}

@media screen and (max-width: 1040px) {
  .process-flow-equipment-list-img-box {
    width: 28.6%;
  }
}

@media screen and (max-width: 768px) {
  .process-flow-equipment-list-img-box {
    width: 100%;
  }
}


.process-flow-equipment-list-img-box img {
  width: 100%;
  object-fit: cover;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.process-flow-equipment-list-h {
  margin-bottom: 0.5em;
  font-weight: 500;
}

.process-flow-equipment-list-txt {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  color: rgba(20, 40, 51, 0.75);
  line-height: 1.75;
}

@media screen and (max-width: 1040px) {
  .process-flow-equipment-list-copy-box {
    width: 71.4%;
  }
}

@media screen and (max-width: 768px) {
  .process-flow-equipment-list-copy-box {
    width: 100%;
  }
}

/*------------------------------------------------ ///ここまで（ビジネス）体制と設備/// ------------------------------------------------*/

/*------------------------------------------------ ///ここからSASについてページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここからSASについてページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここからSASについてページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここからSASについてページ/// ------------------------------------------------*/

/*------------------------------------------------ ///ここから（SASについて）MVV/// ------------------------------------------------*/

.about-mvv-wrapper {
  padding-top: calc(96px + 64 * ((100vw - 400px) / 1040));
}

#about-mvv .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

#about-mvv .section-h-group {
  font-size: calc(36px + 20 * ((100vw - 400px) / 1040));
}

.about-vision-container .section-h-group {
  margin-bottom: 1em;
}

.about-vision-container {
  background-image: url(../img/about-vision-kv.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding-bottom: 5.6%;
  text-align: center;
}

.about-vision-h-group {
  padding: 0 calc(20px + 198 * ((100vw - 400px) / 1040));
  container-type: inline-size;
}

.about-vision-h {
  font-size: calc(28px + 36 * ((100vw - 400px) / 1040));
  font-weight: 500;
  margin-bottom: 1em;
}

.about-vision-txt {
  font-size: calc(16px + 4 * ((100vw - 400px) / 1040));
  line-height: 2;
  letter-spacing: 0.02em;
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .about-vision-txt {
    line-height: 1.75;
  }
}

.about-vision-txt span {
  display: inline-block;
}

@container (max-width: 494px) {
  .about-vision-h-group .about-vision-txt span {
    display: inline-block;
  }
}

.about-vision-txt .txt-wrap {
  display: block;
}

@container (max-width: 494px) {
  .about-vision-txt .txt-wrap {
    display: inline-block;
  }
}

.vision-curve-img-box {
  width: 100%;
}

.vision-curve-img-box img {
  width: 100%;
  object-fit: cover;
}

.about-idea-container {
  padding: 0 calc(20px + 60 * ((100vw - 400px) / 1040));
  padding-top: calc(72px + 48 * ((100vw - 400px) / 1040));
  align-items: flex-start;
  column-gap: calc(0px + 120 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1040px) {
  .about-idea-container {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  #about-mission .section-h-group {
    margin-bottom: 0.75em;
  }
}

.about-idea-container .section-h {
  margin-bottom: 0;
}

.about-idea-lead {
  margin-left: auto;
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
}

.about-idea-container .section-h-block {
  display: flex;
  margin-bottom: calc(27px + 21 * ((100vw - 400px) / 1040));
  align-items: flex-end;
  justify-content: space-between;
  container-type: inline-size;
}

@media screen and (max-width: 768px) {
  .about-idea-container .section-h-block {
    flex-direction: column;
    align-items: flex-start;
  }
}

.about-mvv-wrapper .section-h-lead {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  margin-bottom: 1em;
  line-height: 1.75;
}




.about-idea-container .section-h-group {
  margin-bottom: 0;
}

.about-idea-list-block {
  border-top: 1px solid rgba(128, 152, 165, 0.15);
}

.about-idea-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: 8.4%;
  font-size: calc(20px + 12 * ((100vw - 400px) / 1040));
  padding: calc(20px + 28 * ((100vw - 400px) / 1040)) 0;
  border-bottom: 1px solid rgba(128, 152, 165, 0.15);
  box-sizing: border-box;
}

@media screen and (max-width: 1040px) {
  .about-idea-list {
    padding: calc(20px + 28 * ((100vw - 400px) / 1040)) calc(0px + 40 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 768px) {
  .about-idea-list {
    flex-direction: column;
  }
}

.about-idea-list-h {
  font-weight: 500;
  width: calc(360px + 40 * ((100vw - 400px) / 1040));
}

@media screen and (min-width: 1441px) {
  .about-idea-list-h {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .about-idea-list-h {
    width: 100%;
  }
}

.about-idea-list-sub-h {
  font-size: calc(20px + 8 * ((100vw - 400px) / 1040));
  font-weight: 500;
}

.about-idea-list .list-tag {
  font-size: calc(12px + 2 * ((100vw - 400px) / 1040));
  line-height: 1;
  color: #008cd6;
  margin-bottom: 2em;
}

.about-idea-list-txt {
  display: flex;
  flex-direction: column;
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  position: relative;
  width: 100%;
  margin-top: calc(36px + 6 * ((100vw - 400px) / 1040));
  row-gap: 0.5em;
}

.about-idea-list-txt span {
  display: inline-block;
  padding-left: 1em;
}

.about-idea-list-txt span::before {
  content: "・";
  display: block;
  position: absolute;
  left: 0;
  opacity: 0.5;
}

/*------------------------------------------------ ///ここまで（SASについて）MVV/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから（SASについて）ポリシー/// ------------------------------------------------*/
.about-policy-wrapper {
  padding: calc(96px + 64 * ((100vw - 400px) / 1040)) calc(20px + 60 * ((100vw - 400px) / 1040));
  display: flex;
  flex-direction: column;
}

.about-policy-wrapper .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

.about-policy-container {
  margin-bottom: calc(72px + 48 * ((100vw - 400px) / 1040));
}

.about-policy-container:last-child {
  margin-bottom: 0;
}

.about-policy-cover-block {
  display: flex;
  column-gap: 6.25%;
  margin-bottom: calc(60px + 20 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .about-policy-cover-block {
    flex-direction: column;
  }
}

.about-policy-img-box {
  width: calc(360px + 280 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .about-policy-img-box {
    width: 100%;
  }
}

.about-policy-img-box img {
  width: 100%;
  object-fit: cover;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.about-policy-copy-box {
  width: calc(360px + 200 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .about-policy-copy-box {
    width: 100%;
  }
}

.about-policy-copy-box .section-h-group {
  font-size: calc(28px + 20 * ((100vw - 400px) / 1040));
  margin-bottom: 0.75em;
  line-height: 1.75;
}

@media screen and (max-width: 768px) {
  .about-policy-copy-box .section-h-group {
    margin-top: 1em;
    margin-bottom: 1em;
  }
}

.about-policy-copy-box .section-h {
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.75;
}

.about-policy-copy-box .section-tag-h {
  font-size: calc(12px + 2 * ((100vw - 400px) / 1040));
  color: #008cd6;
  opacity: 1;
}

.about-policy-copy-box .section-h-lead {
  font-size: calc(16px + 8 * ((100vw - 400px) / 1040));
  line-height: 1.75;
  font-weight: 500;
  margin-bottom: 0.75em;
}

@media screen and (max-width: 768px) {
  .about-policy-copy-box .section-h-lead {
    line-height: 1.5;
  }
}

.about-policy-copy-box .section-h-txt {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040));
  line-height: 2.25;
}

@media screen and (max-width: 768px) {
  .about-policy-copy-box .section-h-txt {
    line-height: 1.75;
  }
}

.about-policy-guide-list-group {
  border-top: 1px solid rgba(128, 152, 165, 0.15);
  display: flex;
  flex-wrap: wrap;
}

.about-policy-guide-block .small-h {
  opacity: 0.75;
  margin-bottom: 1em;
}

.about-policy-guide-list {
  display: flex;
  flex-direction: column;
  font-size: calc(18px + 14 * ((100vw - 400px) / 1040)) !important;
  padding: calc(24px + 16 * ((100vw - 400px) / 1040)) calc(0px + 40 * ((100vw - 400px) / 1040));
  width: 50%;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(128, 152, 165, 0.15);
}

@media screen and (max-width: 768px) {
  .about-policy-guide-list {
    flex-wrap: nowrap;
    width: 100%;
  }
}

.about-policy-guide-list:nth-child(odd) {
  border-right: 1px solid rgba(128, 152, 165, 0.15);
}

@media screen and (max-width: 768px) {
  .about-policy-guide-list:nth-child(odd) {
    border-right: none;
  }
}

.policy-guide-icon-box {
  background: #008cd6;
  padding: 0.25em;
  box-sizing: border-box;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  width: calc(36px + 12 * ((100vw - 400px) / 1040));
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

.policy-guide-icon {
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-size: calc(28px + 4 * ((100vw - 400px) / 1040)) !important;
}

.about-policy-guide-h-box {
  display: flex;
  align-items: center;
  column-gap: calc(16px + 16 * ((100vw - 400px) / 1040));
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040)) !important;
}

.about-policy-guide-h {
  font-weight: 500;
}

.about-policy-guide-h-lead {
  font-size: calc(14px + 2 * ((100vw - 400px) / 1040)) !important;
  color: rgba(20, 40, 51, 0.75);
  line-height: 2;
  margin-left: calc(52px + 28 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 768px) {
  .about-policy-guide-h-lead {
    line-height: 1.5;
  }
}

/*------------------------------------------------ ///ここまで（SASについて）ポリシー/// ------------------------------------------------*/

/*------------------------------------------------ ///ここから企業情報ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから企業情報ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから企業情報ページ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから企業情報ページ/// ------------------------------------------------*/

/*------------------------------------------------ ///ここから（企業情報）代表メッセージ/// ------------------------------------------------*/
.company-top-msg-wrapper {
  margin: 0 calc(20px + 60 * ((100vw - 400px) / 1040));
  padding-top: calc(96px + 64 * ((100vw - 400px) / 1040));
}

.company-top-msg-wrapper .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

.company-top-msg-wrapper .section-h-group {
  margin-bottom: 1em;
}

.company-top-msg-container {
  column-gap: 7.8%;
  font-size: calc(28px + 20 * ((100vw - 400px) / 1040)) !important;
}

@media screen and (max-width: 1040px) {
  .company-top-msg-container {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  .company-top-msg-container {}
}

.top-msg-cover-group {
  display: flex;
  position: relative;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .top-msg-cover-group {
    flex-direction: column;
  }
}

.top-msg-img-box {
  width: 45.3%;
  position: absolute;
}

@media screen and (max-width: 768px) {
  .top-msg-img-box {
    position: static;
    width: 100%;
  }
}

.top-msg-img-box img {
  width: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

.top-msg-copy-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 1.5em;
}

@media screen and (max-width: 768px) {
  .top-msg-copy-box {
    width: 100%;
  }
}

.top-msg-h-box {
  width: 46.8%;
  font-weight: 500;
  margin-left: auto;
  box-sizing: border-box;
  margin-bottom: 1.5em;
}

@media screen and (max-width: 1040px) {
  .top-msg-h-box {
    aspect-ratio: 1 / 1;
    vertical-align: bottom;
    display: flex;
    align-items: flex-end;
  }
}

@media screen and (max-width: 768px) {
  .top-msg-h-box {
    width: 100%;
    aspect-ratio: unset;
    vertical-align: bottom;
    display: flex;
    align-items: flex-end;
    margin-top: 1em;
    margin-bottom: 2em;
  }
}

.top-msg-txt {
  width: 46.8%;
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040)) !important;
  line-height: 2;
  margin-left: auto;
}

@media screen and (max-width: 1040px) {
  .top-msg-txt {
    width: 100%;
  }
}

.company-top-name-box {
  font-size: calc(18px + 6 * ((100vw - 400px) / 1040)) !important;
  line-height: 1.75;
  margin-left: auto;
}

.company-top-position {
  font-size: calc(12px + 2 * ((100vw - 400px) / 1040)) !important;
}

/*------------------------------------------------ ///ここまで（企業情報）代表メッセージ/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから（企業情報）企業概要/// ------------------------------------------------*/
.company-overview-wrapper {
  padding-right: calc(20px + 60 * ((100vw - 400px) / 1040));
  padding-top: calc(96px + 64 * ((100vw - 400px) / 1040));
  padding-bottom: calc(72px + 48 * ((100vw - 400px) / 1040));
  box-sizing: border-box;
}

@media screen and (max-width: 1040px) {
  .company-overview-wrapper {
    padding-right: calc(20px + 60 * ((100vw - 400px) / 1040));
  }
}

.company-overview-wrapper .section-h-group {
  margin-left: 5.6%;
  margin-bottom: 1em;
}

.company-overview-wrapper .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

.company-overview-container {
  display: flex;
  gap: calc(0px + 120 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1040px) {
  .company-overview-container {
    flex-direction: column;
  }
}

.company-overview-img-box {
  width: calc(360px + 120 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1040px) {
  .company-overview-img-box {
    display: none;
  }
}

.company-overview-img-box img {
  width: 100%;
  object-fit: cover;
  border-radius: 0 calc(4px + 4 * ((100vw - 400px) / 1040)) calc(4px + 4 * ((100vw - 400px) / 1040)) 0;
}

.company-overview-list-box {
  width: calc(360px + 400 * ((100vw - 400px) / 1040));
}


@media screen and (max-width: 1040px) {
  .company-overview-list-box {
    width: 100%;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 1040px) {
  .company-overview-container .company-overview-list-box {
    padding-left: calc(20px + 60 * ((100vw - 400px) / 1040));
  }
}

.company-overview-list {
  display: flex;
  width: 100%;
  column-gap: calc(20px + 20 * ((100vw - 400px) / 1040));
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040));
  padding-bottom: 1.66em;
  margin-bottom: 1.66em;
  border-bottom: 1px solid rgba(128, 152, 165, 0.15);
}

@media screen and (max-width: 1040px) {
  .company-overview-list {
    flex-direction: column;
    row-gap: 1em;
    width: auto;
  }
}

.company-overview-list-title {
  width: calc(80px + 10 * ((100vw - 400px) / 1040));
  font-weight: 500;
  white-space: nowrap;
}

@media screen and (min-width: 1441px) {
  .company-overview-list-title {
    width: calc(120px + 40 * ((100vw - 400px) / 1040));
  }
}

.company-overview-list-content {
  width: calc(360px + 240 * ((100vw - 400px) / 1040));
  display: flex;
}

@media screen and (min-width: 1441px) {
  .company-overview-list-content {
    width: calc(600px + 240 * ((100vw - 400px) / 1040));
    display: flex;
  }
}

@media screen and (max-width: 1040px) {
  .company-overview-list-content {
    width: 100%;
  }
}

.company-overview-list-content .location {
  width: 100%;
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 440px) {
  .company-overview-list-content .location {
    width: auto;
  }
}

.auth-mark-list-box {
  display: flex;
  font-size: calc(14px + 0 * ((100vw - 400px) / 1040));
  gap: calc(8px + 16 * ((100vw - 400px) / 1040));
  width: 100%;
  min-width: 254px;
}

@media screen and (max-width: 1040px) {
  .auth-mark-list-box {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 768px) {
  .auth-mark-list-box {
    flex-direction: row;
  }
}

@media screen and (max-width: 400px) {
  .auth-mark-list-box {
    min-width: 100%;
  }
}

.auth-mark-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(14px + 2 * ((100vw - 400px) / 1040)) calc(16px + 4 * ((100vw - 400px) / 1040));
  border: 1px solid rgba(128, 152, 165, 0.25);
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
  width: calc(160px + 0 * ((100vw - 400px) / 1040));
  box-sizing: border-box;
  gap: calc(32px - 8 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1040px) {
  .auth-mark-list {
    flex-direction: row;
    width: calc(50% - (8px + 16 * ((100vw - 400px) / 1040)));
    gap: calc(16px + 4 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 580px) {
  .auth-mark-list {
    width: 100%;
  }
}

.auth-txt-item {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

.auth-txt-cat {
  font-size: calc(12px + 0 * ((100vw - 400px) / 1040));
  color: rgba(20, 40, 51, 0.5);
  margin-right: 1em;
  line-height: 1.75;
}

.auth-mark-list img {
  width: calc(64px + 16 * ((100vw - 400px) / 1040));
}

/*------------------------------------------------ ///ここまで（企業情報）企業概要/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから（企業情報）拠点情報/// ------------------------------------------------*/

.company-location-wrapper {
  padding: 0 calc(20px + 60 * ((100vw - 400px) / 1040));
  padding-bottom: calc(96px + 64 * ((100vw - 400px) / 1040));
  display: flex;
}

@media screen and (max-width: 1040px) {
  .company-location-wrapper {
    flex-direction: column;
  }
}

.company-location-wrapper .section-h-group {
  font-size: calc(48px + 8 * ((100vw - 400px) / 1040));
  margin-bottom: 1em;
  width: calc(360px + 120 * ((100vw - 400px) / 1040));
  padding-left: calc(0px + 40 * ((100vw - 400px) / 1040));
}

@media screen and (max-width: 1040px) {
  .company-location-wrapper .section-h-group {
    padding-left: 0;
    width: auto;
  }
}

.company-location-wrapper .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

.company-location-wrapper .company-overview-list-content {
  column-gap: calc(20px + 20 * ((100vw - 400px) / 1040));
}

.location-img-box {
  width: calc(160px + 80 * ((100vw - 400px) / 1040));
  aspect-ratio: 3 / 2;
}

@media screen and (max-width: 1040px) and (min-width: 769px) {
  .location-img-box {
    width: 31.6%;
  }
}

@media screen and (max-width: 768px) and (min-width: 441px) {
  .location-img-box {
    width: calc(160px + 80 * ((100vw - 400px) / 640));
    min-width: 160px;
  }
}

@media screen and (max-width: 440px) {
  .location-img-box {
    width: calc(160px + 80 * ((100vw - 400px) / 640));
    min-width: auto;
  }
}


.location-img-box img {
  width: 100%;
  object-fit: cover;
  border-radius: calc(4px + 4 * ((100vw - 400px) / 1040));
}

/*------------------------------------------------ ///ここまで（企業情報）拠点情報/// ------------------------------------------------*/
/*------------------------------------------------ ///ここから（企業情報）沿革/// ------------------------------------------------*/

.company-histrory-wrapper {
  background: #f3f4f5;
  padding: calc(72px + 48 * ((100vw - 400px) / 1040)) calc(20px + 60 * ((100vw - 400px) / 1040));
  padding-bottom: calc(96px + 64 * ((100vw - 400px) / 1040));
}

.company-histrory-wrapper .section-h-group {
  margin-bottom: 1em;
}

.company-histrory-wrapper .section-tag-h {
  color: #008cd6;
  opacity: 1;
}

.company-histrory-container {
  display: flex;
  font-size: calc(24px + 8 * ((100vw - 400px) / 1040));
  position: relative;
}

.company-histrory-pointer-block {
  width: auto;
  height: 1em;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  position: sticky;
  left: 0;
  top: 16.4%;
  margin-bottom: calc(24px + 12 * ((100vw - 400px) / 1040));
}

@media screen and (min-width: 1441px) {
  .company-histrory-pointer-block {
    margin-bottom: calc(36px + 4 * ((100vw - 400px) / 1040));
  }
}

@media screen and (max-width: 768px) {
  .company-histrory-pointer-block {
    margin-bottom: calc(70px + 24.5 * ((100vw - 400px) / 1040));
  }
}

.company-histrory-pointer {
  width: 0.25em;
  aspect-ratio: 1 / 1;
  background: #008cd6;
  display: block;
  border-radius: 9999px;
}

.company-histrory-list-block {
  width: 93.65%;
}

.company-histrory-list {
  display: flex;
  padding-bottom: calc(24px + 12 * ((100vw - 400px) / 1040));
  margin-bottom: calc(24px + 12 * ((100vw - 400px) / 1040));
  border-bottom: 1px solid rgba(128, 152, 165, 0.15);
  column-gap: 1em;
}

@media screen and (max-width: 768px) {
  .company-histrory-list {
    flex-direction: column;
  }
}

.company-histrory-list:last-child {
  margin-bottom: 0;
}

.company-histrory-list-date {
  display: flex;
  column-gap: 0.25em;
  line-height: 1;
  font-weight: 600;
  color: #008cd6;
}

@media screen and (max-width: 768px) {
  .company-histrory-list-date {
    margin-bottom: 0.75em;
  }
}

.company-histrory-list-date-m {
  font-size: 0.55em;
  margin-top: auto;
}

.company-histrory-list-txt {
  font-size: calc(16px + 2 * ((100vw - 400px) / 1040));
  line-height: 1.75;
}

/*------------------------------------------------ ///ここまで（企業情報）沿革/// ------------------------------------------------*/

.news-wrapper {
  padding-left: calc(30px + 90 * ((100vw - 400px) / 1040));
  padding-top: 0;
  padding-right: calc(30px + 90 * ((100vw - 400px) / 1040));
  padding-bottom: calc(96px + 64 * ((100vw - 400px) / 1040));
}