@charset "UTF-8";
:root {
  --color-bg: #fff;
  --color-bg-rgb: 255, 255, 255;
  --color-gray: #F5F5F5;
  --color-footer-bg: #3788DE;
  --text-black:#101820;
  --main-gray-color:#E5E5E5;
  --color-primary:#3788DE;
  --color-secondary:#FFAB1A;
  --color-danger:#ff0000;
  --font-langJa:"Noto Sans JP",sans-serif;
  --font-langEn: "Poppins", sans-serif;
  --font-langNum: "Poppins", sans-serif;
  --pc-width:1400;
  --contents-width:1272;
  --contents-width-px:calc(var(--contents-width) * 1px);
  --blue1: linear-gradient(180deg, #3788DE 0%, #37BADE 100%);
  --blue2: #2F59AD;
  --blue4:linear-gradient(270deg, #285DC7 3.34%, #2F59AD 100%);
  --radius-xs: 8px;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
}

/*************************
* TOP
**************************/
.mv-outer {
  display: contents;
}
@media (max-width: 767px) {
  .mv-outer {
    display: block;
    width: 100%;
    height: 100svh;
    overflow-y: hidden;
  }
}
@media (orientation: landscape) and (max-width: 767px) {
  .mv-outer {
    display: contents;
    height: auto;
  }
}

.mv {
  position: relative;
  aspect-ratio: 1400/1049;
  overflow: hidden;
  background: url(../img/animation/bg_mv_lay02.png) no-repeat top left/100%;
}
@media (max-width: 767px) {
  .mv {
    height: 100%;
  }
}
@media (orientation: landscape) and (max-width: 767px) {
  .mv {
    height: auto;
  }
}
.mv::before {
  z-index: 10;
}

.bg-river {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
  aspect-ratio: 1400/1049;
  background: url(../img/animation/bg_river_lay01.png) no-repeat top left/100%;
  -webkit-animation: moveRiver 5s linear 0s infinite;
          animation: moveRiver 5s linear 0s infinite;
}

.bg-mv02 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 4;
  pointer-events: none;
  aspect-ratio: 1400/1049;
  background: url(../img/animation/bg_mv_lay01.png) no-repeat top left/100%;
}

.am-train {
  position: absolute;
  z-index: 3;
  width: calc(270 / var(--pc-width) * 100%);
  aspect-ratio: 240/192;
  -webkit-animation: moveTrain 5s linear 0s 1 forwards;
          animation: moveTrain 5s linear 0s 1 forwards;
}
.am-train img {
  width: 100%;
}

@-webkit-keyframes moveTrain {
  from {
    bottom: calc(680 / var(--pc-width) * 100%);
    right: calc(-240 / var(--pc-width) * 100%);
  }
  to {
    bottom: calc(-192 / var(--pc-width) * 100%);
    right: calc(860 / var(--pc-width) * 100%);
  }
}

@keyframes moveTrain {
  from {
    bottom: calc(680 / var(--pc-width) * 100%);
    right: calc(-240 / var(--pc-width) * 100%);
  }
  to {
    bottom: calc(-192 / var(--pc-width) * 100%);
    right: calc(860 / var(--pc-width) * 100%);
  }
}
@-webkit-keyframes moveRiver {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: -1%;
    top: -1%;
  }
}
@keyframes moveRiver {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: -1%;
    top: -1%;
  }
}
.mv-title {
  position: absolute;
  left: 6%;
  top: 17%;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.25em;
  font-size: 3.4vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  font-family: "Noto Serif JP", serif;
}
.mv-title span {
  display: inline-block;
  padding: 0.1em 0.5em;
  background-color: #fff;
}

.mv {
  --chara: calc(1 / 35 * 100%);
  --mvh: 1049;
}

.mv-balloon {
  position: absolute;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  filter: drop-shadow(0px 6px 11px rgba(0, 0, 0, 0.25));
  z-index: 5;
  font-size: 1.6rem;
  font-weight: 700;
  font-size: 1.14vw;
  line-height: 120%;
  cursor: pointer;
}

@media (max-width: 767px) {
  .mv-balloon {
    font-size: min(1.6rem,4.26vw);
  }
   .mv-title {
    font-size: min(4.4rem,11.73vw);
  }
  
}
@media (orientation: landscape) and (max-width: 767px) {
  .mv-balloon {
    font-size: 1.14vw;
  }
   .mv-title {
    font-size: 3.4vw;
  }
}
.mv-balloon .icon-search {
  grid-area: 1/1/2/2;
}
.mv-balloon .balloon-text {
  grid-area: 1/1/2/2;
}
.mv-balloon::before {
  position: absolute;
  bottom: -0.5em;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 0.75em;
  height: 0.75em;
  -webkit-mask-image: url(../img/common/balloon_triangle.svg);
          mask-image: url(../img/common/balloon_triangle.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: top center;
          mask-position: top center;
  background-color: #fff;
}
.mv-balloon .icon-search {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 0.5em 1em;
  display: inline-flex;
  align-items: center;
  align-self: end;
  border: 2px solid #fff;
  background-color: var(--color-secondary);
  border-radius: var(--radius-xs);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.mv-balloon .icon-search::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask-image: url(../img/common/icon_search.svg);
          mask-image: url(../img/common/icon_search.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--text-black);
}
.mv-balloon .balloon-text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1em;
  border: 2px solid #fff;
  background-color: var(--color-secondary);
  border-radius: var(--radius-xs);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.mv-balloon:hover .icon-search, .mv-balloon:focus .icon-search {
  opacity: 0;
  visibility: hidden;
}
.mv-balloon:hover .balloon-text, .mv-balloon:focus .balloon-text {
  opacity: 1;
  visibility: visible;
}

.mv-balloon.bal01 {
  position: absolute;
  left: calc(1175 / var(--pc-width) * 100%);
  top: calc(630 / var(--mvh) * 100%);
}
.mv-balloon.bal02 {
  position: absolute;
  left: calc(74 / var(--pc-width) * 100%);
  top: calc(716 / var(--mvh) * 100%);
}
.mv-balloon.bal03 {
  position: absolute;
  left: calc(403 / var(--pc-width) * 100%);
  top: calc(215 / var(--mvh) * 100%);
}
.mv-balloon.bal04 {
  position: absolute;
  left: calc(805 / var(--pc-width) * 100%);
  top: calc(139 / var(--mvh) * 100%);
}
.mv-balloon.bal05 {
  position: absolute;
  left: calc(420 / var(--pc-width) * 100%);
  top: calc(503 / var(--mvh) * 100%);
}
.mv-balloon.bal06 {
  position: absolute;
  left: calc(347 / var(--pc-width) * 100%);
  top: calc(419 / var(--mvh) * 100%);
}
.mv-balloon.bal07 {
  position: absolute;
  left: calc(665 / var(--pc-width) * 100%);
  top: calc(416 / var(--mvh) * 100%);
}
.mv-balloon.bal08 {
  position: absolute;
  left: calc(1013 / var(--pc-width) * 100%);
  top: calc(181 / var(--mvh) * 100%);
}
.mv-balloon.bal09 {
  position: absolute;
  left: calc(135 / var(--pc-width) * 100%);
  top: calc(493 / var(--mvh) * 100%);
}
.mv-balloon.bal10 {
  position: absolute;
  left: calc(360 / var(--pc-width) * 100%);
  top: calc(827 / var(--mvh) * 100%);
}
.mv-balloon.bal11 {
  position: absolute;
  left: calc(934 / var(--pc-width) * 100%);
  top: calc(367 / var(--mvh) * 100%);
}
.mv-balloon.bal12 {
  position: absolute;
  left: calc(481 / var(--pc-width) * 100%);
  top: calc(355 / var(--mvh) * 100%);
}
.mv-balloon.bal13 {
  position: absolute;
  left: calc(1236 / var(--pc-width) * 100%);
  top: calc(264 / var(--mvh) * 100%);
}
.mv-balloon.bal14 {
  position: absolute;
  left: calc(609 / var(--pc-width) * 100%);
  top: calc(567 / var(--mvh) * 100%);
}
/*キャラクター （左上から）*/
.mv-man_blue {
  position: absolute;
  left: calc(91 / var(--pc-width) * 100%);
  top: calc(508 / var(--mvh) * 100%);
  transform: scaleX(-1);
  width: var(--chara);
}

.mv-lady_orange {
  position: absolute;
  left: calc(204 / var(--pc-width) * 100%);
  top: calc(474 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-man_water {
  position: absolute;
  left: calc(146 / var(--pc-width) * 100%);
  top: calc(582 / var(--mvh) * 100%);
  width: 5%;
}

.mv-man_guid {
  position: absolute;
  left: calc(219 / var(--pc-width) * 100%);
  top: calc(600 / var(--mvh) * 100%);
  transform: scaleX(-1);
  width: var(--chara);
}

/*川より左*/
.mv-drone01 {
  position: absolute;
  left: 4.5%;
  bottom: 21%;
  width: 11%;
}

.mv-man_drone {
  position: absolute;
  left: calc(71 / var(--pc-width) * 100%);
  top: calc(879 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-man_stand {
  position: absolute;
  left: calc(329 / var(--pc-width) * 100%);
  top: calc(801 / var(--mvh) * 100%);
  transform: scaleX(-1);
  width: var(--chara);
}

.mv-man_guid02 {
  position: absolute;
  left: calc(330 / var(--pc-width) * 100%);
  top: calc(900 / var(--mvh) * 100%);
  width: var(--chara);
}

/*浄化槽*/
.mv-man_stand02 {
  position: absolute;
  left: calc(404 / var(--pc-width) * 100%);
  top: calc(511 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-man_stand03 {
  position: absolute;
  left: calc(407 / var(--pc-width) * 100%);
  top: calc(592 / var(--mvh) * 100%);
  transform: scaleX(-1);
  width: var(--chara);
}

.mv-man_guid03 {
  position: absolute;
  left: calc(469 / var(--pc-width) * 100%);
  top: calc(548 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-man_box {
  position: absolute;
  left: calc(525 / var(--pc-width) * 100%);
  top: calc(566 / var(--mvh) * 100%);
  width: var(--chara);
}

/*環境整備*/
.mv-man_walk {
  position: absolute;
  left: calc(525 / var(--pc-width) * 100%);
  top: calc(451 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-man_gray02 {
  position: absolute;
  left: calc(651 / var(--pc-width) * 100%);
  top: calc(212 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-lady_denim {
  position: absolute;
  left: calc(692 / var(--pc-width) * 100%);
  top: calc(340 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-lady_blue {
  position: absolute;
  left: calc(989 / var(--pc-width) * 100%);
  top: calc(142 / var(--mvh) * 100%);
  transform: scaleX(-1);
  width: var(--chara);
}

.mv-man_spana {
  position: absolute;
  left: calc(1065 / var(--pc-width) * 100%);
  top: calc(235 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-man_blue02 {
  position: absolute;
  left: calc(601 / var(--pc-width) * 100%);
  top: calc(467 / var(--mvh) * 100%);
  transform: scaleX(-1);
  width: var(--chara);
}

.mv-man_guid04 {
  position: absolute;
  left: calc(854 / var(--pc-width) * 100%);
  top: calc(485 / var(--mvh) * 100%);
  transform: scaleX(-1);
  width: var(--chara);
}

.mv-man_walk02 {
  position: absolute;
  left: calc(778 / var(--pc-width) * 100%);
  top: calc(545 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-lady_blue02 {
  position: absolute;
  left: calc(960 / var(--pc-width) * 100%);
  top: calc(395 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-man_stand04 {
  position: absolute;
  left: calc(1051 / var(--pc-width) * 100%);
  top: calc(361 / var(--mvh) * 100%);
  transform: scaleX(-1);
  width: var(--chara);
}

.mv-man_guid05 {
  position: absolute;
  left: calc(1076 / var(--pc-width) * 100%);
  top: calc(353 / var(--mvh) * 100%);
  width: var(--chara);
}

/*公園*/
.mv-man_gray03 {
  position: absolute;
  left: calc(896 / var(--pc-width) * 100%);
  top: calc(650 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-kid_green {
  position: absolute;
  left: calc(1043 / var(--pc-width) * 100%);
  top: calc(515 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-kid_orange {
  position: absolute;
  left: calc(1086 / var(--pc-width) * 100%);
  top: calc(467 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-kid_yellow {
  position: absolute;
  left: calc(1030 / var(--pc-width) * 100%);
  top: calc(499 / var(--mvh) * 100%);
  transform: scaleX(-1);
  width: var(--chara);
}

.mv-man_gray04 {
  position: absolute;
  left: calc(1166 / var(--pc-width) * 100%);
  top: calc(399 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-man_stand06{
  position: absolute;
  left: calc(1217 / var(--pc-width) * 100%);
  top: calc(376 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-man_box02{
  position: absolute;
  left: calc(1254 / var(--pc-width) * 100%);
  top: calc(405 / var(--mvh) * 100%);
  width: var(--chara);
}

/*線路左*/
.mv-man_stand05 {
  position: absolute;
  left: calc(1199 / var(--pc-width) * 100%);
  top: calc(732 / var(--mvh) * 100%);
  width: var(--chara);
}

.mv-man_guid06 {
  position: absolute;
  left: calc(1237 / var(--pc-width) * 100%);
  top: calc(670 / var(--mvh) * 100%);
  width: var(--chara);
}

/*踏切*/
.mv-fumikiri01 {
  position: absolute;
  left: calc(832 / var(--pc-width) * 100%);
  top: calc(684 / var(--mvh) * 100%);
  width: calc(26/1400 * 100%);
}

.mv-fumikiri02 {
  position: absolute;
  left: calc(1057 / var(--pc-width) * 100%);
  top: calc(709 / var(--mvh) * 100%);
  width: calc(26/1400 * 100%);
}
/************************
* about
************************/
.top-about {
  padding: 27px 0 60px;
}
@media (max-width: 767px) {
  .top-about {
    padding: 107px 0 60px;
  }
}

.tp01-bb {
  position: absolute;
  top: 10px;
  left: 60%;
}
@media (max-width: 767px) {
  .tp01-bb {
    top: -50px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.top-about-wrap {
  position: relative;
  width: 100%;
  padding-left: calc(64 / 1400 * 100%);
}
@media (max-width: 767px) {
  .top-about-wrap {
    padding: 0 4%;
  }
}

.top-about-body {
  display: flex;
  flex-direction: column;
  gap: 40px 0;
  padding: 64px calc(95 / 733 * 100%) 64px calc(24 / 733 * 100%);
  background-color: #fff;
  border-radius: var(--radius-sm);
  width: calc(733 / 1336 * 100%);
}
@media (max-width: 767px) {
  .top-about-body {
    padding: 64px 8%;
    width: 100%;
  }
}
.top-about-body .text-wrap {
  font-size: 1.6rem;
  line-height: 180%;
}
@media (max-width: 767px) {
  .top-about-body .text-wrap {
    font-size: 1.4rem;
  }
}

.top-about-button {
  margin: 0 auto;
  width: 237px;
}

.top-about-thumb {
  position: absolute;
  right: 0;
  bottom: 70px;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  width: calc(741 / var(--pc-width) * 100%);
  height: 550px;
}
@media (max-width: 767px) {
  .top-about-thumb {
    position: relative;
    right: 0;
    bottom: auto;
    width: 115%;
    height: auto;
    aspect-ratio: 379/309;
  }
}
.top-about-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.top-about-chara {
  margin: 40px auto 0;
}

/************************
* loop
************************/
/* ループスライダー　*/
@-webkit-keyframes infinity-scroll-left {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes infinity-scroll-left {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes infinity-scroll-left2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes infinity-scroll-left2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@-webkit-keyframes infinity-scroll-right {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes infinity-scroll-right {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@-webkit-keyframes infinity-scroll-right2 {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes infinity-scroll-right2 {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(0);
  }
}
.top-loop-slider-area {
  margin-top: 100px;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.top-loop-slider {
  transition-timing-function: linear;
}

.top-loop-slider-item {
  position: relative;
  border-radius: var(--radius-xs);
  width: 394px;
  aspect-ratio: 394/292;
  overflow: hidden;
}
.top-loop-slider-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.top-about-animation {
  margin: 125px auto 0;
  width: 50%;
  aspect-ratio: 697/162;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .top-about-animation {
    margin: 125px auto 0;
    width: 74%;
    aspect-ratio: 256/165;
  }
}

.top-man_stand {
  position: relative;
  width: 100px;
  transform: scaleX(-1);
}
@media (max-width: 767px) {
  .top-man_stand {
    width: 84px;
  }
}

.top-man_guid {
  position: relative;
  width: 100px;
}
@media (max-width: 767px) {
  .top-man_guid {
    width: 84px;
  }
}

.tp02-bb {
  position: relative;
  z-index: 5;
  align-self: flex-start;
}

/*******************
* business
********************/
.top-business {
  padding: 0 0 160px;
}
@media (max-width: 767px) {
  .top-business {
    padding: 0 0 105px;
  }
}

.top-business-wrap {
  margin-top: 84px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 40px;
}
@media (max-width: 767px) {
  .top-business-wrap {
    margin-top: 84px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 32px 40px;
  }
}

/* .top-business-item {
  padding: 32px 0 48px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-gray);
  border-radius: var(--radius-xs);
}
.top-business-item:nth-child(even) .title {
  color: var(--color-secondary);
}
.top-business-item:nth-child(even) .title span::before {
  background-color: var(--color-secondary);
}
.top-business-item .title {
  padding: 0 calc(30 / 390 * 100%);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-langEn);
  order: 1;
}
.top-business-item .title span {
  position: relative;
  display: inline-block;
}
.top-business-item .title span::before {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  content: "";
  display: block;
  width: 36px;
  height: 8px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-image: url(../img/common/title_wave.svg);
          mask-image: url(../img/common/title_wave.svg);
  background-color: var(--color-primary);
}
.top-business-item .thumb {
  margin: 0 auto;
  max-width: 390px;
  order: 2;
}
.top-business-item .thumb img {
  width: 100%;
  height: auto;
}
.top-business-item .text {
  padding: 0 calc(30 / 390 * 100%);
  font-size: 1.8rem;
  letter-spacing: 0.005em;
  text-align: center;
  order: 3;
} */

.top-business-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
}


.top-business-item {
  display: flex;
  position: relative;
  align-items: center;
  gap: 24px;
  height: 88px;
  padding: 0px 64px 0px 20px;
  border-radius: var(--radius-xs);
  border: 1px solid #707070;
  background: var(--color-gray);
  transition: all 0.3s ease-in-out;
}

.top-business-item::after {
  position: absolute;
  content: "";
  background-image: url(../img/common/top-business-arrow.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 26px;
  aspect-ratio: 1 / 1;
  top: 50%;
  transform: translateY(-50%);
  right: 32px;
  transition: all 0.3s ease-in-out;
}

.top-business-item:hover {
  background: #fff;
}

.top-business-item:hover::after {
  right: 24px;
}

.top-business-txt {
  font-size: 2.0rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

@media (min-width:768px) and (max-width:1024px) {
    .top-business-txt {
    font-size: 1.8rem;
  }
}

@media (max-width:767px) {
  .top-business-wrap {
    grid-template-columns: repeat(1, 1fr);
  }

    .top-business-txt {
    font-size: 1.6rem;
  }

  .top-business-item img {
    width: 60px;
    height: 60px;
  }

  .top-business-item {
  padding: 0px 56px 0px 20px;
}

  .top-business-item::after {
  width: 20px;
  aspect-ratio: 1 / 1;
  top: 50%;
  transform: translateY(-50%);
  right: 24px;
  transition: all 0.3s ease-in-out;
}
}

.top-business-button {
  margin: 60px auto 0;
  max-width: 237px;
}

.spacer {
  position: relative;
  overflow: hidden;
}

.bg-spacer {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(590 / 1920 * 100 * 1vw);
  background: #fff;
  overflow: hidden;
}
@media (max-width: 767px) {
  .bg-spacer {
    height: calc((362 * 0.9) / 375 * 100 * 1vw);
  }
}
.bg-spacer img {
  height: auto;
  width: 100%;
}

/********************
* お知らせ
********************/
.top-news {
  position: relative;
  z-index: 0;
  padding: 120px 0 243px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .top-news {
    padding: 120px 0 340px;
  }
}

.bg-news {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.bg-news .g01 {
  aspect-ratio: 1920/453;
}
.bg-news .g02 {
  width: 100%;
  height: 100%;
}

.front-news {
  position: relative;
}
@media (max-width: 767px) {
  .front-news {
    margin: -80px 0;
  }
}

.grid-news01 {
  position: relative;
  display: grid;
  padding: 64px 4% 94px;
  grid-auto-columns: 1fr;
  grid-auto-rows: auto;
  grid-template-columns: auto 57%;
  grid-template-rows: auto 1fr;
  gap: 88px 5%;
  grid-template-areas: "g01 g02" "g03 g02";
  margin: 0 auto;
  max-width: 1007px;
  background-color: var(--color-gray);
  border-radius: var(--radius-xs);
}
@media (max-width: 960px) {
  .grid-news01 {
    margin: 0 auto 0;
    padding: 56px 6% 90px;
    width: 92%;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 25px 5%;
    grid-template-areas: "g01" "g02" "g03";
  }
}
.grid-news01 .g01 {
  grid-area: g01;
}
.grid-news01 .g02 {
  grid-area: g02;
  align-content: center;
}
.grid-news01 .g03 {
  grid-area: g03;
}

.top-newslist.newslist a {
  padding: 2em 1.5em 2em 0.5em;
}
@media (max-width: 960px) {
  .top-newslist.newslist a {
    padding: 1em 1.5em 1em 0.5em;
  }
}

.top-news-button {
  margin: 0 auto 0 0;
  width: 100%;
  max-width: 237px;
}
@media (max-width: 767px) {
  .top-news-button {
    margin: 30px auto 0;
  }
}

.top-newslist {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
@media (max-width: 767px) {
  .top-newslist {
    margin-top: 12px;
  }
}

.top-newslist-item {
  border-bottom: 1px solid #37BADE;
}
.top-newslist-item:first-child {
  border-top: 1px solid #3788DE;
}
.top-newslist-item a {
  position: relative;
  padding: 1.75em 1.5em 1.75em 0;
  display: flex;
  flex-direction: column;
  font-size: 1.8rem;
  font-weight: 500;
}
@media (max-width: 767px) {
  .top-newslist-item a {
    font-size: 1.5rem;
  }
}
.top-newslist-item a:hover .title, .top-newslist-item a:active .title, .top-newslist-item a:focus .title {
  color: var(--color-primary);
}
.top-newslist-item .date {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: 1.3rem;
  line-height: 190%;
}
.top-newslist-item .title {
  margin-top: 0.5em;
  transition: color ease-in-out 0.3s;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
@media (max-width: 767px) {
  .top-newslist-item .title {
    margin-top: 0;
    margin-left: 0;
    width: 100%;
    font-size: 1.5rem;
    -webkit-line-clamp: 2;
  }
}

.top-man_box {
  position: absolute;
  left: 0%;
  bottom: -32px;
  width: 100px;
  transform: scaleX(-1);
}
@media (max-width: 767px) {
  .top-man_box {
    width: 80px;
  }
}

.front-news .news-pre {
  padding: 24px 0 ;
  text-align: center;
}

/******************
* recruit
*******************/
.top-recruit-wrap {
  margin: 123px auto 0;
  position: relative;
  width: 100%;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0px 0px;
}
.top-recruit-wrap .g02 {
  grid-area: 1/1/3/3;
}
.top-recruit-wrap .g01 {
  grid-area: 1/2/3/4;
}
@media (max-width: 767px) {
  .top-recruit-wrap {
    display: flex;
    flex-direction: column;
  }
}

.tp03-bb {
  position: absolute;
  top: -32px;
  right: 31%;
  z-index: 4;
}
@media (max-width: 767px) {
  .tp03-bb {
    left: 4%;
    right: auto;
  }
}

.top-recruit-body {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 64px 0;
  padding: 105px calc(48 / 933 * 100%) 105px calc(335 / 933 * 100%);
  color: #fff;
  background-color: var(--blue2);
  border-radius: var(--radius-lg) 0 0 0;
  width: calc(764 / 933 * 100%);
  align-self: start;
}
@media (max-width: 767px) {
  .top-recruit-body {
    padding: 64px 4% 174px;
    gap: 45px;
    width: 100%;
  }
}
.top-recruit-body .text-wrap {
  font-size: 1.6rem;
  line-height: 180%;
}
@media (max-width: 767px) {
  .top-recruit-body .text-wrap {
    font-size: 1.6rem;
  }
}

.top-recruit-button {
  margin: 0 auto;
  width: 237px;
}

.top-recruit-thumb {
  margin-top: 90px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  width: calc(842 / 933 * 100%);
  height: 716px;
}
@media (max-width: 767px) {
  .top-recruit-thumb {
    position: relative;
    margin-top: -120px;
    left: 0%;
    aspect-ratio: 33/28;
    height: auto;
    width: calc(329 / 375 * 100%);
  }
}
.top-recruit-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.top-man_hose {
  position: absolute;
  right: 4%;
  bottom: 6.5%;
  width: 100px;
  pointer-events: none;
}
@media (max-width: 767px) {
  .top-man_hose {
    top: -4%;
    bottom: auto;
  }
}

.tp04-bb {
  position: absolute;
  right: 32%;
  bottom: -6%;
}
/******************
* vehicles
*******************/
.top-vehicles {
  padding-bottom: 100px;
}
@media (max-width: 767px) {
  .top-vehicles {
    padding-top: 74px;
    padding-bottom: 225px;
  }
}

.top-vehicles-wrap {
  margin-top: 84px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 40px;
}
@media (max-width: 767px) {
  .top-vehicles-wrap {
    margin-top: 46px;
    grid-template-columns: repeat(1, 1fr);
    gap: 32px 40px;
  }
}

.top-vehicles-item {
  padding: 32px 8% 48px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-gray);
  border-radius: var(--radius-xs);
}
@media (max-width: 767px) {
  .top-vehicles-item {
    padding: 32px 5% 32px;
    gap: 8px;
  }
}
.top-vehicles-item .title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  order: 2;
}
@media (max-width: 767px) {
  .top-vehicles-item .title {
    font-size: 2rem;
  }
}
.top-vehicles-item .text {
  font-family: var(--font-langEn);
  font-size: 1.3rem;
  font-weight: 500;
  order: 3;
}
.top-vehicles-item .thumb {
  position: relative;
  width: 100%;
  order: 1;
  background: url(../img/top/bg_vehicles.svg) no-repeat center/80%;
}
.top-vehicles-item .thumb img {
  width: 100%;
  height: auto;
}

.top-vehicles-button {
  margin: 86px auto 0;
  width: 100%;
  max-width: 237px;
}
@media (max-width: 767px) {
  .top-vehicles-button {
    margin-top: 60px;
  }
}