@charset "utf-8";


body {
 font-family: "Noto Sans JP", sans-serif;
 color: #333;
}


 /* 全体を2カラムで分ける */
    .container-1
     {
      display: flex;
      height: 100vh; /* 画面いっぱいの高さ */
     }


/* ヒーロー（最初の2画面） */
.hero {
 display: flex;
 height: 100vh; /* 画面いっぱい */
}


/* 左側テキスト */
.left.text {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: 0 40px;
 background: #f5f5f5; /* 好みで色を変える */
      width: 50%;


       padding: 80px 60px;
      box-sizing: border-box;
     }

    .left h1
     {
      font-size: 32px;
      margin-bottom: 30px;
     }

    .left p
     {
      font-size: 16px;
      line-height: 1.8;
      margin-bottom: 40px;
     }


/* 右側ビジュアル部分 */
.hero-right {
 flex: 1;
 background-size: cover;
 background-position: center;
   transition: background-image 1s ease-in-out;
 background-image: url(Step.jpg); /* 初期画像 */
      width: 50%;
      position: sticky;
      top: 0;
      height: 100vh;
     
     }


/* レスポンシブ対応 */
  
@media screen and (max-width: 768px) {
  /* HEROを縦並びにする */
  .container-1,
  .hero {
    display: flex;
    flex-direction: column; /* 上から下に縦並び */
    height: auto;           /* 高さ自動 */
  }

  /* 画像を上に表示 */
  .hero-right {
    order: -1;             /* 上に来る */
    width: 100%;           /* 横幅いっぱい */
    height: auto;          /* 高さ自動 */
    min-height: 40vh;      /* 最小高さを確保 */
    max-height: 60vh;      /* 最大高さも設定可 */
    position: relative;    /* sticky解除 */
    background-image: url("two-human-work.jpg"); /* スマホ用画像 */
    background-size: cover;
    background-position: center center;
    margin-bottom: 20px;   /* 下に余白 */
    z-index: 1;            /* 前面に表示 */
  }

  /* 文章を下に表示 */
  .left.text {
    order: 0;              /* 下に来る */
    width: 100%;
    padding: 20px;
    position: relative;
    z-index: 2;
  }
}