@charset "utf-8";

/*========= 左固定レイアウトのためのCSS ===============*/

/*左と右を囲う全体のエリア*/
#planning-wrapper {
  position: relative; /*position stickyの基点にするため relativeをかける*/
  display: flex; /*横並び指定*/
  flex-wrap: wrap; /*ボックスの折り返し可*/
}
  @media all and (min-width: 320px) and (max-width: 767px) {
    #planning-wrapper{
      display: inline-block; /*縦並び指定*/

    }
  }

/*左エリア*/
#planning-fixed-area {
  /*左固定記述*/
  position: -webkit-sticky; /*Safari用*/
  position: sticky;
  top: 0;
  display: flex;
  overflow: hidden;

  /*横幅を40%にする*/
  width: 40%;

  /* width: 40%; */
  height: 100%;
}
@media all and (min-width: 768px) and (max-width: 1024px) {
  #planning-fixed-area { 
    width: 40%;
  }
  #planning-container {
    width: 40%!important;
  }
}

/*右エリア*/
#planning-container {
  /*横幅を60%にする*/
  width: 60%;
}

@media all and (min-width: 310px) and (max-width: 767px) {
  #planning-fixed-area {
    /*左固定記述*/
    position: -webkit-sticky; /*Safari用*/
    position: relative;
    top: 0;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 600px;
    max-height:500px;
    z-index: 0;
  }
  #planning-fixed-area img{
    max-width: 100%;
    height: auto;
    max-height:500px;
    margin: 0 auto;
    display: block;
  }

  #planning-container {
    width: 100%;
    display: block;
    z-index: 999;
  }
  
  
}