/* -----カルーセルのスタイル----- */
 .carousel {
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
 }
 @media (max-width: 768px) {
   .carousel {
     height: 80vh;
   }
 }
 .carousel img {
   width: 100%;
   height: 100vh;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   transition: opacity 1s ease-in-out;
 }
 .carousel img.active {
   opacity: 1;
 }
 /* -----キャッチコピー----- */
.catchphrase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.8rem;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  padding: 20px;
  max-width: 80%; /* デスクトップ時 */
  width: 80%;
  text-align: center;
}

@media (max-width: 768px) {
  .catchphrase {
    font-size: 2.5rem; /* スマホ時は少し調整 */
    max-width: 95%; /* 文字の表示幅を広げる */
    width: 90%; /* スマホ時にさらに広く */
    padding: 10px; /* 余白を調整 */
  }
}
 /* -----スクロールした際の間隔調整----- */
 /*  .content {
    height: 150vh;
    padding: 20px;
  }*/
 /* -----わたしたちについて----- */
 #about_top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin: 5% 0;
   flex-wrap: wrap;
 }
 #about_top .text_area {
   width: 50%; /* テキストエリアの幅を調整 */
   padding-right: 5%;
   margin-left: 10%; /* 左側に20%の余白を追加 */
 }
 #about_top .text_area h2 {
   font-size: 3.5rem;
   color: #003b6b;
 }
 #about_top .text_area h3 {
   font-size: 2.5rem;
   color: #99a6b6;
   margin: 0 0 30px 0;
 }
 #about_top .text_area p {
   color: #1E4366;
   line-height: 2.5;
 }
 #about_top .photo_area {
   display: flex; /* 画像を横並びに */
   justify-content: space-between; /* 左右に配置 */
   width: 40%;
 }
 #about_top .img1, #about_top .img2 {
   width: 48%; /* 画像を左右に並べるために少し幅を小さく */
   height: auto;
 }
 @media (max-width: 768px) {
   #about_top {
     display: block;
   }
	 #about_top .photo_area {
   margin:15px auto 35px auto;
   justify-content: space-between; /* 左右に配置 */
   width: 90%;
 }
   #about_top .text_area {
     width: 88%;
     margin: 10% auto;
   }
   #about_top .text_area h2 {
     font-size: 2.5rem;
   }
   #about_top .text_area h3 {
     font-size: 2.0rem;
     margin: 0 0 20px 0;
   }
   #about_top .photo_background {
     justify-content: space-between; /* 左右に配置 */
     width: 88%;
     margin: 10% auto;
   }
 }
 /*==================================================
スライダーのためのcss
===================================*/
 .slider img {
   width: 100%; /*スライダー内の画像を横幅100%に*/
   height: auto;
 }
 /*slickのJSで書かれるタグ内、スライド左右の余白調整*/
 .slider .slick-slide {
   margin: 0 10px; /*スライド左右の余白調整*/
 }
 .slider {
   position: relative;
   padding-bottom: 50px; /* 画像の下にスペースを確保 */
   background: linear-gradient(to bottom, transparent 50%, #ffe300 50%);
 }
 .slider::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 50%; /* 下半分だけ色をつける */
   background: #ffe300;
   z-index: -1; /* 背景を画像の背面に配置 */
 }
 
/*------------求人------------*/
 #recruit_top {
   background: linear-gradient(-45deg, #9DD2DA, #F5F2DE);
 }
 #recruit_top .photo_background {
   display: flex;
   background-image: url(../images/back_recruit_new@2x.png);
   background-size: cover;
   background-position: right center;
   background-repeat: no-repeat;
   height: 60vh;
   width: 80%;
   margin-left: 20%;
 }
 @media (max-width: 1200px) {
 #recruit_top .photo_background {
     background-size: cover;
     background-position: right center;
     background-repeat: no-repeat;
     height: 55vh;
     width: 95%;
     margin-left: 5%;
   }
 }




 #recruit_top .text_area {
   width: 50%;
   margin: 5% 10% 0 0;
 }
 #recruit_top .text_area h2 {
   font-size: 3.0rem;
   margin: 0 0 35px 0;
   color: #003b6b;
 }
 #recruit_top .text_area p {
   color: #1E4366;
   line-height: 2.1;
 }

@media (max-width: 990px) {
 #recruit_top {
   background: none;
 }
#recruit_top .photo_background {
     display: block;
	background-image: none;
	height: auto;
   }
 #recruit_top .text_area {
   width: 85%;
   margin: 5% auto 0 auto;
 }

 #recruit_top .text_area h2 {
   font-size: 2.4rem;
   margin: 15px 0 25px 0;

 }

}
/*スマホ*/
/* 初期状態では非表示 */
#recruit_top_sp {

    display: none;
}

@media (max-width: 990px) {
  /* 990px以下で表示 */
#recruit_top_sp {
	 background: linear-gradient(-45deg, #9DD2DA, #F5F2DE);
    display: block; /* デフォルトで表示（PC・タブレット用） */
	height: 50vh;
}
#recruit_top_sp .photo_background {
  display: block; /* 990px以下では表示 */
  background-image: url(../images/back_recruit_sp@2x.png);
  background-size: cover; /* 背景画像を縦横比を保ちながらフィットさせる */
  background-position: center center; /* 画像を中央に配置 */
  background-repeat: no-repeat; /* 画像の繰り返しを防止 */
  height: 30vh; /* ビューポートの高さに合わせる */
}
}


@media (min-width: 991px) {
  /* 991px以上で非表示 */
  #recruit_top_sp {
    display: none; /* 991px以上では非表示 */
  }
}
	
/*会社概要*/
#company_top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../images/photo_company.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 50vh; 
    width: 100%;
}

#company_top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 27, 61, 0.6); /* 濃い紺色 + 透明度60% */
}

#company_top .text_area {
  position: relative;
  color: white;
  
  width: 40%;
  z-index: 1; /* 背景より上に配置 */
}

#company_top .text_area h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
	text-align: center;
}

#company_top .text_area p {
  font-size: 1.7rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

 @media (max-width: 768px) {
	 #company_top .text_area {

  width: 80%;

}
}