.wrap {
  overflow: hidden;

}
body {
  background-color: #1D1B1B;
}

/* ----- section-kv ----- */
#kv {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kv-wrap {
  width: 100%;
  height: min(50vw, 700px);
  position: relative;
  display: inline-block;
}
#kv-logo-3d {
  width: min(127.5vw, 2040px);
  height: calc(min(127.5vw, 2040px) * 1.043);
  position: fixed;
  top: clamp(-50vw, -70vw, -860px);
  left: 50%;
  transform: translateX(-45%);
  z-index: -1;
  pointer-events: none;
}
#kv-logo-3d canvas {
  transition: filter 0.5s ease;
}
.title-wrap {
  position: absolute;
  top: min(11.428vw, 160px);
  left: min(5.714vw, 80px);
  text-align: left;
}
img.top-kv01, img.top-kv04, img.top-kv07 {
  position: absolute;
  width: 22vw;
  border-radius: min(0.428vw, 6px);
  display: block;
  margin-left: min(2.857vw, 40px);
}
img.kv-copy {
  width: min(47.142vw, 660px);
  z-index: -1;
  margin-top: 20vw;
}
.lead {
  font-size: min(1.285vw, 18px);
  color: #fff;
  margin-top: 2.142vw;
}
img.top-kv02, img.top-kv05, img.top-kv08 {
  width: 22.857vw;
  border-radius: min(0.428vw, 6px);
  position: absolute;
  top: min(1.428vw, 20px);
  right: 33.75vw;
}
img.top-kv03, img.top-kv06, img.top-kv09 {
  width: 30vw;
  border-radius: min(0.428vw, 6px);
  position: absolute;
  top: min(32.857vw, 460px);
  right: 5.714vw;
}
.scroll-wrap{
    position: absolute;
    top: min(10vw, 140px);
    right: 14.285vw;
}
.scroll-inner{
  position: relative;
}
img.star-img{
  position: absolute;
  transform: translateX(-50%)translateY(-50%);
  top:50%;
  left:50%;
  width: min(1.714vw, 24px);
}
img.scroll-img{
    width: min(7.142vw, 100px);
}
@media screen and (max-width: 1024px) {
#kv-logo-3d {
  height: 100vh;
  top: 0;
}

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

img.top-kv01, img.top-kv04, img.top-kv07 {
  width: 44vw;
    border-radius: 4px;
  margin-left: 0;
}
.title-wrap {
  top: 70px;
  left: min(5.714vw, 80px);
}
img.kv-copy {
  width: 300px;
  margin-top: 38vw;
}
.lead {
  font-size: 14px;
  color: #fff;
  margin-top: 20px;
}
img.top-kv02, img.top-kv05, img.top-kv08 {
    width: 46vw;
    border-radius: 4px;
    top: -160px;
    right:160px;
}
img.top-kv03, img.top-kv06, img.top-kv09 {
  width: 54vw;
  border-radius: 4px;
  position: absolute;
  top: -40px;
  right: 20px;
}
.scroll-wrap{
    top: -140px;
    right: 40px;
}
img.star-img{
  position: absolute;
  width: 20px;
}
img.scroll-img{

    width: 80px;
}
}

/* ----- section top-service ----- */
#top-service {
  margin: min(21.428vw, 300px) 0 min(10.714vw, 150px) 0;
  position: relative;
}
.t-service-wrap {
  display: flex;
  flex-wrap: wrap;
}
.t-service-left, .t-service-right {
  width: 50%;
}
img.t-service-img {
  width: 100%;
  border-radius: 0 min(1.142vw, 16px) min(1.142vw, 16px) 0;
}
h2 {
  font-size: min(14.285vw, 200px);
  color: transparent;
  font-weight: 600;
  position: relative;
  letter-spacing: -0.01em;
  font-family: "Poppins", sans-serif;
}
.h2-w span, .h2-b span {
  display: inline-block;
}
#top-service .h2-wrap {
  position: absolute;
  top: min(-12.857vw, -180px);
  right: min(2.857vw, 40px);
  z-index: -1;
}
#top-service .h2-jp {
  top: min(4.285vw, 60px);
  right: min(0.714vw, 10px);
}
.h2-jp {
  font-size: min(1.428vw, 20px);
  color: #C5206B;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  position: absolute;
  z-index: 2;
  letter-spacing: 0.1em;
}
.h2-w {
  -webkit-text-stroke: min(0.107vw, 1.5px) #ccc;
  text-stroke: min(0.107vw, 1.5px) #ccc;
}
.t-service-right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.t-service-right p {
  text-align: left;
  color: #fff;
}
a.btn01 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: min(1vw, 14px);
  color: #fff;
  border-radius: min(2.5vw, 35px);
  margin-top: min(2.142vw, 30px);
  position: relative;
  overflow: hidden; /* 文字移動に備えて */
  transition: background-color 0.3s ease;
   background-color: #000;
  width: min(18.571vw, 260px);
  height: min(5vw, 70px);
  transition: background-color 0.3s ease;
}

a.btn01 span.text {
  transition: transform 0.3s ease;
}
.btn-circle {
  width: min(0.857vw, 12px);
  height: min(0.857vw, 12px);
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  right: min(1.428vw, 20px);
  z-index: 2;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
img.arrow03{
  width: min(0.857vw, 12px);
  height: min(0.857vw, 12px);
  position: absolute;
  right: min(1.428vw, 20px);
  z-index: 3;
  opacity: 0;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.circle-p {
  background-color: #C5206B;
}
/* === hover時の変化 === */
a.btn01:hover {
  background-color: #C5206B;
}

a.btn01:hover .text {
  transform: translateX(-40px);
}

a.btn01:hover img.arrow03 {
  opacity: 1;
  transform: scale(2.5);
}

.kerning01 {
  letter-spacing: -0.1em;

}


@media screen and (max-width: 600px) {
#top-service {
  margin: 80px 0;
  position: relative;
}
h2 {
  font-size: 64px;
}

#top-service .h2-wrap {
  top: 0;
  right: 20px;
}
#top-service .h2-jp {
  top: 0;
}
.h2-jp {
  font-size: 14px;
}
.t-service-left {
  width: 90%;
  margin-top: 90px;
}
.t-service-right {
  width: 100%;
  margin-top: 30px;
}
a.btn01 {

  border-radius: 25px;
  margin-top: 20px;
  font-size: 12px;
    width: 180px;
  height: 50px;
}
.btn-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  right: 20px;
}
.h2-w {
  -webkit-text-stroke: 1px #ccc;
  text-stroke: 1px #ccc;
}

}

/* ----- section company ----- */
#top-company {
  padding: min(14.285vw, 200px) 0 min(10.714vw, 150px) 0;
  position: relative;
}
.top-w-bg01, .top-w-bg02, .top-w-bg03 {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
}

.top-w-bg03 {
  background-color: rgba(255, 255, 255, 0.9);
}
.h2-b {
  -webkit-text-stroke: min(0.107vw, 1.5px) #ccc;
  text-stroke: min(0.107vw, 1.5px) #ccc;
}
#top-company .h2-wrap {
  position: absolute;
  top: min(-1.428vw, -20px);
  left: min(2.857vw, 40px);
  z-index: 0;
}
#top-company .h2-jp {
  top: min(4.285vw, 60px);
  left: min(0.714vw, 10px);
}
#top-company ul {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}
.content900 {
  width: min(64.286vw, 900px);
  display: inline-block;
}
a.btn02 {
  width: 100%;
  height: min(14.285vw, 200px);
  font-size: min(0.857vw, 12px);
  border-radius: min(1.142vw, 16px);
  background-color: #1D1B1B;
  background-image: url(../img/company-bg.svg);
  background-repeat: no-repeat;
  background-position:min(-4.285vw, -60px) min(-4.285vw, -60px) ;
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 2;
  transition: background-color 0.3s ease;
}

/* ボタン部分 */
.btn-p {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: min(1.785vw, 25px);
  position: relative;
  overflow: hidden;
  background-color: #C5206B;
  width: min(14.285vw, 200px);
  height: min(3.571vw, 50px);
  transition: background-color 0.3s ease;
  margin: min(0.857vw, 12px)  min(1.428vw, 20px) ;
}

/* ボタン内のテキスト */
.btn-text {
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}

.btn-p-wrap{
    text-align: right;
}

/* 最初の円色 */
.circle-b {
  background-color: #000;
}

img.c-arrow01{
  width: min(0.857vw, 12px);
  height: min(0.857vw, 12px);
  position: absolute;
  right: min(1.428vw, 20px);
  z-index: 3;
  opacity: 0;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* hover時のアニメーション */
a.btn02:hover {
  background-color: #C5206B;
}

a.btn02:hover .btn-p {
  background-color: #000;
}

a.btn02:hover .btn-text {
  transform: translateX(-20px);
}

a.btn02:hover img.c-arrow01 {
  transform: scale(2);
  opacity: 1;
}

h3 {
  font-size: min(4.571vw, 64px);
  color: #fff;
  margin-left: min(2.142vw, 30px);
}
.h3-jp {
  font-size: min(1.142vw, 16px);
  line-height: 1;
  display: block;
  margin-top: min(-0.714vw, -10px);
}
.t-company-wrap button {
  position: absolute;
  right: min(2.142vw, 30px);
  bottom: min(2.142vw, 30px);
}
.button-wrap {
  width: 100%;
  text-align: right;
}

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

#top-company {
  padding: 110px 0 70px 0;
}
#top-company .h2-wrap {
  top: 20px;
  left: 20px;
}
#top-company .h2-jp {
  top: 0;
  left: 10px;
}
.content900 {
  width: 90%;
  margin: 0 5%;
}

a.btn02 {
  height: 120px;
  border-radius: 12px;
  margin-bottom: 10px;
  background-position: -60px -60px;
  font-size: 10px;
}
h3 {
  font-size: 32px;
  margin-left: 16px;
}
.h3-jp {
  font-size: 13px;
  margin-top: -4px;
}
.h2-b {
  -webkit-text-stroke: 1px #ccc;
  text-stroke: 1px #ccc;
}
.btn-p{
  width: 160px;
  height: 40px;
  border-radius: 20px;
}
}
/* ----- section top-recruit ----- */
#top-recruit {
  height: min(85.714vw, 1200px);
  overflow: hidden;
  position: relative;
}
.t-recruit-wrap {
  display: flex;
  height: min(85.714vw, 1200px);
  position: relative;
  z-index: 2;
}
.t-recruit-left, .t-recruit-right {
  width: min(30vw, 420px);
}
.t-recruit-center {
  width: calc(100% - min(60vw, 840px));
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* --- PC時 画像バラバラサイズ --- */
img.t-recruit01 { width: min(20vw, 280px); }
img.t-recruit02 { width: min(22.857vw, 320px); }
img.t-recruit03 { width: min(20vw, 280px); }
img.t-recruit04 { width: min(24.285vw, 340px); }
img.t-recruit05 { width: min(18.571vw, 260px); }
img.t-recruit06 { width: min(21.428vw, 300px); }

img.t-recruit-img {
  margin: min(4.285vw, 60px) 0;
  border-radius: min(0.428vw, 6px);
}

/* ---- スライダー基本設定 ---- */
.slider {
  overflow: hidden;
  position: relative;
}

.slider-list {
  display: flex;
  flex-direction: column; /* PCでは縦 */
  list-style: none;
  margin: 0;
  padding: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 縦方向スライダー */
.slider-up .slider-list {
  animation: slideUp 32s linear infinite;
}
.slider-down .slider-list {
  animation: slideDown 32s linear infinite;
}

/* 上に流れる */
@keyframes slideUp {
  0% { transform: translateY(0%); }
  100% { transform: translateY(-50%); }
}
/* 下に流れる */
@keyframes slideDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0%); }
}

/* テキストなど */
.t-recruit-copy {
  font-size: min(1.714vw, 24px);
  color: #fff;
  font-weight: 500;
}
#top-recruit p {
  color: #fff;
  margin-top: min(2.142vw, 30px);
}
#top-recruit .h2-wrap {
  position: absolute;
  transform: translateX(-50%);
  top: min(-1.428vw, -20px);
  left: 50%;
  white-space: nowrap;
}
#top-recruit .h2-jp {
  top: min(4.285vw, 60px);
  left: 50%;
  transform: translateX(-50%);
}


@media screen and (max-width: 600px) {
  #top-recruit {
    padding: 140px 0 60px 0;
    height: auto;
  }

  .t-recruit-wrap {
    height: auto;
    flex-direction: column;
  }

  .t-recruit-left, .t-recruit-right {
    width: 100%;
  }
  .t-recruit-center {
    width: 100%;
    display: block;
    padding: 40px 0;
  }
.t-recruit-copy {
  font-size: 20px;
}
#top-recruit p {
  margin-top: 20px;
}
  /* ★ 全画像 幅160px統一！高さも揃えるとさらに良い */
  img.t-recruit-img {
    width: 160px;
    height: auto;
    margin: 0 10px;
    border-radius: 4px;
  }

  /* 横並びに変更 */
  .slider-up .slider-list,
  .slider-down .slider-list {
    flex-direction: row;
    width: 2160px;
  }

  /* 左に流れる（slider-up） */
  .slider-up .slider-list {
    animation: slideLeft 24s linear infinite;
  }

  /* 右に流れる（slider-down） */
  .slider-down .slider-list {
    animation: slideRight 24s linear infinite;
  }

  /* 左流れ */
  @keyframes slideLeft {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
  }

  /* 右流れ */
  @keyframes slideRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
  }

  #top-recruit .h2-wrap {
    top: 20px;
  }
  #top-recruit .h2-jp {
    top: 0;
  }
}

/* ----- section top-news ----- */
#top-news {
  padding: min(14.285vw, 200px) 0 min(10.714vw, 150px) 0;
  position: relative;
}
#top-news .h2-wrap {
  position: absolute;
  top: min(-1.428vw, -20px);
  left: min(2.857vw, 40px);
  z-index: 0;
}
#top-news .h2-jp {
  top: min(4.285vw, 60px);
  left: min(0.714vw, 10px);
}
#top-news ul {
  width: calc(100% - min(7.143vw, 100px));
  margin-top: min(7.143vw, 100px);
  margin-left: min(3.571vw, 50px);
  position: relative;
  z-index: 2;
}
#top-news li {
  text-align: left;
  border-bottom: 1px solid #ccc;
}

a.news-item {
  color: #271E1E;
  width: 100%;
  height: 100%;
  display: inline-block;
  padding: min(2.142vw, 30px) 0;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
}

a.news-item:hover {
  background-color: #C5206B;
  color: #fff;
}

/* --- 中の要素たち --- */
.n-date {
  width: 25%;
  font-size: min(1vw, 14px);
  display: inline-block;
  padding-left: min(2.142vw, 30px);
  transition: color 0.3s ease;
}

.n-title {
  width: 70%;
  font-size: min(1.285vw, 18px);
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  transition: color 0.3s ease;
}

.n-arrow {
  width: 5%;
  display: inline-block;
  position: relative;
}

/* --- 矢印の基本スタイル --- */
img.arrow01,
img.arrow02 {
  width: min(1.428vw, 20px);
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
}

/* --- hoverした時にarrow01だけ非表示 --- */
a.news-item:hover img.arrow01 {
  opacity: 0;
}


@media screen and (max-width: 600px) {
#top-news {
    padding: 100px 0 60px 0;
}
#top-news .h2-wrap {
  top: 20px;
  left: 20px;
}
#top-news .h2-jp {
  top: 0;
}
.n-date {
  width: 100%;
  font-size: 12px;
  padding-left: 10px;
}
.n-title {
  width: 90%;
  font-size: 14px;
  padding: 0 0 0 10px;

}
.n-arrow {
   margin: 6px 0 0 0;
   width: 10%;
}

img.arrow01, img.arrow02{
    width: 16px;
    right: 10px;
}
} 

/* ----- section footerfront ----- */
#footerfront {
  position: relative;
  padding: min(10.714vw, 150px) 0 min(5.714vw, 80px) 0;
}
.top-w-bg04 {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
}
.footerfront-wrap {
  position: relative;
  width: calc(100% - min(7.143vw, 100px));
  margin-left: min(3.571vw, 50px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5%;
}
.footerfront-item {
  width: 47.5%;
}
.img-wrap {
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
    border-radius: min(1.142vw, 16px) min(1.142vw, 16px) 0 0;
}

img.footerfront-img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.ff-item-lower {
  background-color: #000;
  height: min(12.857vw, 180px);
  border-radius: 0 0 min(1.142vw, 16px) min(1.142vw, 16px);
  position: relative;
  transition: background-color 0.3s ease;
}

.ff-heading {
  font-size: min(4.285vw, 60px);
  line-height: 1.2;
  color: #fff;
  opacity: 0.7;
  font-weight: 600;
  text-align: left;
  position: absolute;
  bottom: min(1.428vw, 20px);
  left: min(2.142vw, 30px);
}

.ff-heading span {
  font-size: min(1.142vw, 16px);
  color: #C5206B;
  font-weight: 500;
  display: block;
  transition: color 0.3s ease;
}

img.ff-arrow01,
img.ff-arrow02 {
  width: min(1.428vw, 20px);
  position: absolute;
  right: min(2.142vw, 30px);
  bottom: min(3.142vw, 44px);
  transition: opacity 0.3s ease;
}

/* === hover時の変化 === */
a.footerfront-item:hover img.footerfront-img {
  transform: scale(1.1); /* 画像拡大 */
}

a.footerfront-item:hover .ff-item-lower {
  background-color: #C5206B; /* 背景色チェンジ */
}

a.footerfront-item:hover .ff-heading span {
  color: #fff; /* span文字色変更 */
}

a.footerfront-item:hover img.ff-arrow01 {
  opacity: 0; /* arrow01を非表示 */
}

@media screen and (max-width: 600px) {
#footerfront {
  position: relative;
  padding: 40px 0;
}
.footerfront-wrap {
  gap: 20px;
}
.footerfront-item {
  width: 80%;
}
img.footerfront-img {
  border-radius: 10px 10px 0 0;
}
.ff-item-lower {
  height: 74px;
  border-radius: 0 0 10px 10px;
}
.ff-heading {
    font-size: 32px;
}
.ff-heading span {
  font-size: 11px;
}
img.ff-arrow01, img.ff-arrow02{
    width: 16px;
}
}
/* ----- footer ----- */
#footer {
  position: relative;
  padding-top: min(5vw, 60px);
  padding-bottom: min(5vw, 60px);
}
.footer-wrap {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: calc(100% - min(7.143vw, 100px));
  margin-left: min(3.571vw, 50px);
}
.footer-left {
  width: 30%;
  text-align: left;
}
img.f-logo {
  width: min(17.142vw, 240px);
}
.footer-right {
  width: 70%;
  text-align: right;
}
#footer p {
  font-size: min(0.857vw, 12px);
  color: #fff;
  margin-top: min(1.666vw, 20px);
}
.f-menu-parent a {
  font-size: min(1vw, 14px);
  line-height: 2.4;
  color: #fff;
}
.f-menu-child a {
  font-size: min(0.857vw, 12px);
  line-height: 2.8;
  color: #fff;
  margin-left: min(0.857vw, 12px);
}
.f-menu {
  display: inline-flex;
  flex-wrap: wrap;
  text-align: left;
}
.f-menu-item {
  border-left: 1px solid #999;
  padding: min(0.285vw, 4px) min(2.142vw, 30px);
}
.f-menu-item:last-child {
  border-right: 1px solid #999;
}
.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-top: min(10.714vw, 150px);
  text-align: left;
  color: #fff;
  width: calc(100% - min(7.143vw, 100px));
  margin-left: min(3.571vw, 50px);
}
.f-menu-child a {
  color: #fff;
}
.copyright {
  margin-right: min(2.857vw, 40px);
  font-size: min(0.857vw, 12px);
}
.top-policy, .top-security {
  margin-left: min(2.857vw, 40px);
  color: #fff;
  font-size: min(0.857vw, 12px);
}

@media screen and (max-width: 600px) {
 #footer {
  padding-top: 40px;
  padding-bottom: 30px;
}

.footer-left {
  width: 100%;
}
img.f-logo {
  width: 160px;
}
.footer-right {
  width: 100%;
  text-align: left;
}
#footer p {
  font-size: 10px;
  margin-top: 12px;
}
.f-menu-parent a {
  font-size: 12px;
  line-height: 2.4;
}
.f-menu-child a {
  font-size: 10px;
  line-height: 2.9;
}
.footer-wrap{
    gap: 30px;
}
.f-menu-item {
  border-left: 1px solid #999;
  padding: 4px 30px;
}

.footer-bottom {
  margin-top: min(10.714vw, 150px);
  text-align: left;
  color: #fff;
  width: calc(100% - min(7.143vw, 100px));
  margin-left: min(3.571vw, 50px);
}
.f-menu-child a {
  color: #fff;
}
.footer-bottom{
    flex-direction: column-reverse;
}
.copyright {
  margin-right: 20px;
  font-size: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 16px 0 0 0;
  border-top: 1px solid #999;
}
.top-policy {
  margin-left: 0;
  font-size: 10px;
}

.top-security {
  margin-left: 20px;
  font-size: 10px;
}