@charset "utf-8";
/* CSS Document */

/* ファーストビュー全体 */
    .hero {
      position: relative;
      width: 100vw; height: 100vh;
      overflow: hidden;
    }

    /* スライド画像コンテナ */
    .hero-slide {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%;
      opacity: 0; visibility: hidden;
      transition: opacity 1.5s ease-in-out; z-index: 1;
    }
    .hero-slide.active { opacity: 1; visibility: visible; z-index: 2; }
    .hero-slide img {
      width: 100%; height: 100%; object-fit: cover;
      transform: scale(1);
    }
    .hero-slide.active img {
      animation: zoomUp 7s ease-out forwards;
    }
    @keyframes zoomUp {
      0% { transform: scale(1); }
      100% { transform: scale(1.08); }
    }

    /* 暗幕オーバーレイ */
    .hero-overlay {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: 3; pointer-events: none;
    }

    /* モバイル・共通のタイポグラフィ設定 */
    .hero-content {
      position: absolute;
      top: 50%; left: 5%;
      transform: translateY(-50%);
      z-index: 4;
      color: #fff;
      perspective: 500px;
      width: 90%;
    }

    .hero-content .line {
      display: block;
      opacity: 0;
      transform: translateY(30px) rotateX(10deg);
      animation: showUp 1.0s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
    }

    @keyframes showUp {
      to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
      }
    }

/* 各行のスタイル（スマホ基準） */
    .hero-content .sub {
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 0.4rem;
    }
    .hero-content .bold {
      font-weight: 700;
      font-size: 1.8rem;
      line-height: 1.3;
    }
    .hero-content .small {
      font-weight: 300;
      font-size: 0.9rem;
      line-height: 1.5;
      margin-top: 0.3rem;
    }

/* =========================================
   slickスライダー  開始
========================================= */

/* =========================================
   スライダー
========================================= */

.slider {
  width: 100%;
  overflow: hidden;
  margin-bottom: 60px;
}


/* =========================================
   各スライド
========================================= */

.slide {
  padding: 0 10px;
}


/* =========================================
   リンク
========================================= */

.slide a {
  display: block;
}


/* =========================================
   画像
========================================= */

.slide img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* =========================================
   slickスライダー  終了
========================================= */

/* =========================================
   求人アニメーション  開始
========================================= */

.strength-section {
            position: relative;
            width: 100%;
            min-height: 100vh;
            background-image: url(../images/index/index_20-2.jpg);
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 2px solid #333;
        }

        /* 【スマホ（デフォルト）用レイアウト】縦並び */
        .content-container {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
			gap:30px;
        }

        .sub-photo {
            width: 90%;
            height: 400px;
            border-radius: 5px;
            background-image: url(../images/index/index_21-2.jpg);
            background-size: cover;
            background-position: center;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
                        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .glass-card {
            width: 90%;
			box-sizing: border-box; /* 追加：パディングを含めて幅を100%にする */
            padding: 5%;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(16px);
            border: 3px solid rgba(255, 255, 255, 1.0);
            box-shadow: 0 20px 40px rgba(0,0,0,0.5);
            opacity: 0;
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .glass-card h3 { margin-bottom: 12px; font-size: 1.9rem; color: #fff; font-style: italic; /* または oblique */ }
        .glass-card p { 
		  line-height: 1.9;
		  color: rgba(255,255,255,0.85);
		   }

        .strength-section.is-active .sub-photo,
        .strength-section.is-active .glass-card {
            opacity: 1;
            transform: translateY(0) translateX(0) rotate(0deg) scale(1);
            filter: blur(0);
        }
		
/* =========================================
   求人アニメーション  終了
========================================= */


.index_1{
  position: relative; /* z-indexを有効にするために必要 */
  width:90%;
  margin:0 auto;
  max-width:1280px;
  margin-top:-200px;
  z-index: 10;
}

.index_2{
  width:100%;
  margin:0 auto;
  margin-bottom:30px;
  padding-top:1px;
  font-size:25px;

}
.index_3{
  width:90%;
  background-color: #ffffff;
  border: 1px solid #e2e8f0; /* 上下左右の枠線 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* うっすらとした影 */
}


.index_4{
  position:relative;
  width:40px;
  height:40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;    /* 画面幅が狭くなっても自動縮小させない */
}

/* 右上端に出っ張る部分を作る */
.index_4::after {
  content: "";
  position: absolute;
  right: -15px; /* 右側へ出っ張らせる距離 */
  width: 15px;  /* 出っ張りの幅 */
  height: 40px; /* 出っ張りの高さ */
  /* 上辺を維持し、下辺を0px（一点）にする多角形カット */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background-color: #dbb800;
}

.index_5{
  display: flex;
  justify-content: center; /* 左右中央 */
  align-items: center;     /* 上下中央 */

}
.index_6{
/* テキスト側：必要に応じて幅や折り返しの制御を行う */
  flex: 1; /* 残りのスペースを柔軟に使う */
  min-width: 0; /* Flexbox内で文字があふれてレイアウトが崩れるのを防ぐ重要なおまじない */
}
.index_7{
/* 画像側：文字に押されて縮まないように固定する */
  flex-shrink: 0; 
  /* 必要に応じて画像のサイズや最大幅を指定 */
}
.index_8{
  display:flex;
  justify-content: flex-start; /* 左寄せ（デフォルトのため省略可能） */
  gap: 30px; /* BとCの間に30pxの隙間を空ける */
}
.index_9{
  margin-left:70px;
  display:flex;
  justify-content: space-between; /* 左寄せ（デフォルトのため省略可能） */
  padding-right:10%;

}

.index_10{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  gap:30px;
  flex-wrap:nowrap;
  max-width:auto;
  padding:3%;
  margin-bottom:100px;
}

.index_11{
  max-height:50px;
}

.index_12{
  padding:3%;
  margin-bottom:10px;
}

.index_13{
  padding:3%;
  text-align:right;
}

.index_14{
  color:#aaa;
  padding-top:50px;
  font-size:35px;
  text-transform: uppercase; /* 強制的にすべて大文字にして表示する */
  letter-spacing:0.2em;
}

.index_15{
  width:90%;
  margin:0 auto;
  max-width:1280px;
  margin-bottom:100px;
}

.index_16{
  flex:1;
  letter-spacing:0.2em;
  line-height:1.9em;
  text-align: justify;
}

.index_17{
  flex:1;
}

.index_18{
  display: flex;
  flex-direction: column-reverse;
  gap:5%;
  margin-bottom:50px;
}

.index_19{

}

.index_20{
  width:90%;
  margin:0 auto;
  max-width:1280px;
}

.index_21{
  margin-bottom:100px;
}

.index_22{
  margin-bottom:100px;
  background-color:#FFFFFF;
}

.index_23{
  background-image:url(../images/index/index_19.jpg);
  background-repeat: no-repeat;
  background-size: contain; /* 高さを要素の高さに合わせる */
  min-height: 500px;         /* 最低限の高さを指定 */ 
  background-position: center; /* 水平・垂直ともに中央 */
  width:90%;
  margin:0 auto;
  max-width:1280px;
  padding-top:50px;
  line-height:1.9em;
}

.index_24{

}

/* デスクトップ用スタイル（1024px以上） */
@media only screen and (min-width: 1024px) {
      .hero-content {
        left: 10%;
        width: auto;
      }
      .hero-content .sub {
        font-size: 0.9rem;
        letter-spacing: 0.2em;
        margin-bottom: 0.8rem;
      }
      .hero-content .bold {
        font-size: 3.5rem;
      }
      .hero-content .small {
        font-size: 1.1rem;
        margin-top: 0.6rem;
      }

.index_3{
  width:31.33%;
}
	  
.index_10{
  flex-direction:row;
  justify-content:space-between;
  align-items:stretch;
}

.index_14{
  font-size:55px;
  letter-spacing:0.1em;
}

.index_18{
  flex-direction: row;
  align-items: flex-start;
}

/* =========================================
   slickスライダー  開始
========================================= */
 .slide {
    padding: 0 10px;
  }

  .slide img {
    height: 200px;
  }

/* =========================================
   slickスライダー  終了
========================================= */

/* =========================================
   求人アニメーション  開始
========================================= */
.strength-section {
                padding: 0;
                perspective: 1000px;
            }

            .content-container {
                max-width: 1280px;
                flex-direction: row;
                align-items: center;
            }

            .sub-photo {
                position: absolute;
                z-index: 1;
                width: 40%;
            }

            .glass-card {
                position: absolute;
                right: 0;
                z-index: 2;
                width: 63%;
            }

            /* パターンごとのPC用アニメーション初期状態 */
            .glass-card.anim-spin { transform: translateY(50px) rotate(20deg) scale(0.9); }
            .glass-card.anim-flip { transform: translateY(40px) rotateX(40deg); transform-origin: center bottom; }
            .glass-card.anim-bounce { transform: translateY(50px) scale(0.75); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
            .glass-card.anim-zoom { transform: scale(1.15); filter: blur(12px); }
            .glass-card.anim-skew { transform: translateY(40px) skewX(-12deg) skewY(4deg); }
            .glass-card.anim-clip { opacity: 1; clip-path: inset(0 100% 0 0); transform: none; transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1); }

            .strength-section.is-active .glass-card.anim-clip { clip-path: inset(0 0 0 0); }
        
		
/* =========================================
   求人アニメーション  終了
========================================= */
  
}