/* ベース設定：スクロールを許可 */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  height: auto;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #000;
}

.yokonarabi {
  display: flex;
  justify-content: center;
}

.semiBold {
  font-weight: bold;
}

/* PCサイズ時のスタイル */
@media (min-width: 768px) {
  .semiBold {
    font-size: 20px;
  }
}

.space {
  padding-top: 100px;
}

/**** viewMoreボタン ****/
.btnBox {
  width: 100%;
  display: flex;
  justify-content: center;
}
.viewMoreBtn {
  height: 35px;
	position: relative;
	border: none;
	border-bottom: 2px solid black;
	width: fit-content;
}
.viewMoreBtn::after {
	content: ">";
	margin-left: 13px;
  color: black;
  font-weight: bold;
}
.viewMoreBtn a {
  color: black;
  font-size: 13px;
  font-weight: bold;
}

/* 白色に変更 */
.viewMoreBtnWhite {
	border-bottom: 2px solid #fff;
}
.viewMoreBtnWhite::after {
  color: #fff;
}
.viewMoreBtnWhite a {
  color: #fff;
}
/******************/

/************** 背景動画 **************/
.bg-video {
  position: fixed;
  top: -25px;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-width: 100%;
  min-height: 100vh;
  object-fit: cover;
  z-index: -2;
  width: 325px;
  height: 118vh;
}

.video-overlay {
  position: fixed; /* ← オーバーレイも同じように固定 */
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 101vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

.video-overlay2 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 92vh;
  background-color: rgba(0, 0, 0, 0);
  /* background-color: red; */
  z-index: 0;
}

/************** スクロール案内 **************/
.scrollInfo {
  height: 20px;
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
  color: #fff;
}

.scrollLine {
  height: 100px;
  width: 50%;
  border-right: 2px solid #fff;
}

/************** テキストエリア **************/
.topContents {
  width: 100%;
  margin-top: 600px;
  color: #fff;
}

.topContent1, .topContent2 {
  text-align: center;
}

.topContent1 {
  font-size: 23px;
}

.topContent2 {
  font-size: 50px;
  margin-top: 90px;
  font-weight: bold;
}

.topContent2_2 {
  font-size: 50px;
  margin-top: 90px;
}

.topContent3 {
  font-size: 15px;
  margin-top: 450px;
  width: 340px;
  margin-left: 20px;
  font-family: serif;
}

/* グラデーション */
.gradationSpace {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0), 10%, black);
}

.blackSpace {
  height: 500vh;
  background-color: black;
}

.scroll-progress-bar {
  position: fixed;
  top: 50%;
  left: 0;
  width: 0%;
  height: 0.5vh;
  background-color: #fff;
  /* z-index: 1; */
  /* transition: width 0.1s ease-out; */
}

/* PCサイズ時のスタイル */
@media (min-width: 768px) {
  .bg-video {
    top: -86px;
  }

  .topContent3 {
    width: 403px;
  }
}

/* PCサイズ時のスタイル */
@media (min-width: 768px) {
  .blackSpace {
    height: 500vh;
  }
}

/************** セクション１（独立支援） **************/
.multi-text-section {
  width: 100%;
  height: 123vh;
  position: relative;
  background-color: #fff;
}

.contentImg {
  padding-top: 60px;
  height: 248px;
  width: 100%;
  background-image: url(/images/companyLogo.png);
  background-size: cover;
}

.contents1Title {
  padding-top: 45px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

.contents1Title2 {
  padding-top: 77px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

.contents1, .contents2 {
  width: 100%;
  padding-top: 50px;
  display: flex;
  justify-content: center;
}

.contents2 {
  padding-bottom: 50px;
}

.content1 {
  width: 70%;
}

.content1Text {
  text-align: center;
  font-size: 13px;
}

/* PCサイズ時のスタイル */
@media (min-width: 768px) {
  .multi-text-section {
    display: flex;
    padding-top: 200px;
  }

  .contentImg {
    height: 360px;
    width: 100%;
    margin-top: 50px;
  }

  .content1Text {
    font-size: 15px;
  }
}

/************** セクション２（事業内容） **************/
.serviceSection {
  width: 100%;
  height: 150vh;
  position: relative;
  background-color: #fff;
}

.sectionTitle {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
}

.serviceContent1, .serviceContent2, .serviceContent3, .serviceContent4 {
  width: 100%;
  height: 200px;
  display: flex;
  margin-top: 60px;
}

.serviceContent1Img {
  width: 85%;
  height: 100%;
  background-image: url(/images/top_INDEPENDENCE.png);
  background-size: cover;
}

.serviceContent2Img {
  width: 85%;
  height: 100%;
  background-image: url(/images/top_BPO.png);
  background-size: cover;
}

.serviceContent3Img {
  width: 85%;
  height: 100%;
  background-image: url(/images/top_WEB.png);
  background-size: cover;
}


.serviceContent4Img {
  width: 85%;
  height: 100%;
  background-image: url(/images/top_CONSULTING.png);
  background-size: cover;
}

.serviceContent1Title, .serviceContent2Title, .serviceContent3Title, .serviceContent4Title {
  padding: 25px 0px 0px 25px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.serviceContent1Text, .serviceContent2Text, .serviceContent3Text, .serviceContent4Text {
  padding: 10px 10px 0px 25px;
  color: white;
}

.serviceContent1-01, .serviceContent2-02, .serviceContent3-03, .serviceContent4-04 {
  width: 16%;
  height: 20px;
  position: relative;
  top: 45%;
  font-size: 10px;
  transform: rotate(-90deg);
  border-bottom: 1px solid black;
}

.serviceContent4 {
  margin-bottom: 50px;
}

/* PCサイズ時のスタイル */
@media (min-width: 768px) {
  .serviceSection {
    height: 225vh;
  }

  .serviceContent1, .serviceContent2, .serviceContent3, .serviceContent4 {
    height: 320px;
  }

  .serviceContent1Title, .serviceContent2Title, .serviceContent3Title, .serviceContent4Title {
  padding: 214px 0px 0px 25px;
  }

}

/************** セクション３（会社概要） **************/
.companySection {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: black;
}

.sectionTitleWhite {
  padding-top: 100px;
  padding-bottom: 50px;
  color: #fff;
}

.companyImg {
  width: 100%;
  height: 63%;
  background-image: url(/images/companyImg.png);
  background-size: cover;
  margin-bottom: 50px;
}

.companyContainer {
  width: 100%;
  height: 100%;
  padding-top: 25px;
}

.info-block {
  border-top: 2px solid #ccc;
  padding: 20px 15px;
  width: 53%;
  margin: 0 0 0 auto;
}

.info-block:last-child {
  border-bottom: 2px solid #ccc;
}

.info-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
}

.info-content {
  white-space: pre-line; /* 改行を維持 */
  font-size: 1.1em;
  color: #fff;
}

/* PCサイズ時のスタイル */
@media (min-width: 768px) {
  .companySection {
    height: 120vh;
  }

  .companyImg {
    width: 40%;
    height: 60%;
  }

  .companyContainer {
  width: 250%;
  }
}

/************** セクション４（採用情報） **************/
.recruitSection {
  width: 100%;
  height: 127vh;
  padding-top: 50px;
  position: relative;
  background-color: #fff;
  display: flex;
  justify-content: center;
}

.recruitContainer {
  width: 100%;
  height: 81%;
  margin-top: 40px;
}

.recruitImg {
  width: 100%;
  height: 28%;
  background-image: url(/images/独立支援Img.png);
  background-size: cover;
  margin-top: 50px;
}

.rectruitTitle {
  font-size: 20px;
  font-weight: bold;
  margin-top: 50px;
  margin-left: 35px;
  white-space: pre-line; /* 改行を維持 */
}

.rectruitText {
  margin-left: 35px;
  line-height: 25px;
  white-space: pre-line; /* 改行を維持 */
}

.rectruitSNSContainer {
  width: 80%;
  height: 170px;
  margin-top: 70px;
  margin-left: 35px;
  margin-bottom: 50px;
  border: 1.5px solid #000;
  border-radius: 30px;
}

.instaIcon {
  width: 40px;
  height: 40px;
  margin: 25px;
  background-image: url(/images/InstagramIcon.jpg);
  background-size: cover;
}

.recruitContents {
  margin: 20px;
  display: flex;
}

.recruitText {
  margin-right: 18px;
  font-size: 13px;
  white-space: pre-line; /* 改行を維持 */
}

.recruitBtn {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  background-color: black;
  border-radius: 45px;
  overflow: hidden;
}

.recruitBtn span {
  position: relative;
  right: 2px;
  width: 16px;
  height: 6px;
  border-bottom: 1px solid #fff;
  border-right: 2px solid #fff;
  transform: skew(45deg);
  transition: all 0.3s ease;
}

/* PCサイズ時のスタイル */
@media (min-width: 768px) {
  .recruitSection {
    height: 150vh;
  }
  
  .recruitContainer {
    width: 80%;
  }

  .recruitImg {
    height: 53%;
    width: 71%;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
  }

  .recruitContentFlex {
    display: flex;
    margin-top: 50px;    
    margin-bottom: 100px;
  }

  .rectruitTitle {
    margin-left: 200px;
  }
  
  .rectruitText {
    margin-left: 200px;
  }

  .rectruitSNSContainer {
    width: 40%;
    height: 195px;
    margin-left: 80px;
  }

  .instaIcon {
    margin: 40px 25px 25px 40px;
  }
  
  .recruitContents {
    margin: 20px 20px 20px 40px;
  }

}



/* アニメーション */
.fadein {
  opacity: 0;
  transform: translate(0,0);
  transition: all 1.2s;
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}