スマホサイズ(500px以下)だとフェードインができない

<section id="02">の<ul>をフェードインさせたいのですが、スマホサイズだと消えたままでフェードインしてこないです。 ```HTML <section id="01" class="sec_01"> <div class="inner"> <div class="title_area"> <span class="arrow"> さらに！ </span> <h2>会話し放題の<span style="color:red">チャット機能</span>つき</h2> <div class="flex_in just">

      <div class="flex_lt">
        <h3>同じ悩みを持った人同士のチャット</h3>
        <div class="table">
          <div class="img">
            <img src="quality.png" alt="悩みの解決のチャット">
          </div>
          <div class="txt">
            <p>悩みをもったとき、同じことで悩む人同士をマッチングさせることで、気分が和らいだり、一緒になって解決したりすることができます。</p>
          </div>
        </div>
      </div>
    
    
    
    <div class="flex_rt">
      <h3>県人会グループがあり、近所との交流</h3>
      <div class="table">
        <div class="img">
          <img class="circle" src="internet_offline_offkai.png" alt="低価格なホームページ">
        </div>
        <div class="txt">
          <p>同じ県同士の人で繋がれるちゃっとのご用意いたしました。新たなコミュニティで良い関係を構築できる場を設け、満足度を爆上げします。</p>
        </div>
      </div>
    </div>
  </div>
</div>

</div> </section> <section id="02" class="sec_02 back_gray"> <div class="sec2" id="fadein-ver1"> <div class="inner">

	<div class="title_area">
    <span class="arrow"> ソルヴフライならでは</span>
		<h2>
    <span style="color:red">行事</span>
    にも全力で取り組む
    <span style="color:red">熱い集団</span>
  </h2>
	</div>
	
  <ul>
    <li class="fadein">
      <div class="table">
        <div class="img"><img src="light.png" width="64" height="64" alt="デザイン"></div>
        <div class="txt">学年の垣根を越えた交流</div>
      </div>
      <div class="tl"><b>学校では不可能</b>な交流</div>
    </li>
    <li class="fadein">
      <div class="table">
        <div class="img"><img src="seo.png" width="64" height="64" alt="集客"></div>
        <div class="txt">部活・サークル活動も充実</div>
      </div>
      <div class="tl"><b>身体能力向上</b>も期待</div>
    </li>
    <li class="fadein">
      <div class="table">
        <div class="img"><img src="radio_taisou.png" width="64" height="64" alt="開発"></div>
        <div class="txt">体育祭や文化祭のイベント！</div>
      </div>
      <div class="tl"><b>年代問わず</b>団結します</div>
    </li>
  </ul>
</div>

</div> </section>

```CSS

.fadein {
        opacity : 0;
        transform : translate(0, 100px);
        transition : all 1s;
}

.fadein.active{
    opacity : 1;
    transform : translate(0, 0);
}
.just{
    opacity : 0;
    transform : translate(0, 100px);
    transition : all 1s;
}
.just.active{
    opacity : 1;
    transform : translate(0, 0);
}

.title_area {
    margin-top:50px;
	text-align: center;
	font-weight: 600;
}
.title_area .arrow {
    margin-bottom:30px;
    position: relative;
    display: inline-block;
    font-size: 18px;
    padding: 0px 60px;
}
.title_area .arrow:before, .title_area .arrow:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: #555;
}
.title_area .arrow:before {
    left: 0;
    -moz-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}
.title_area .arrow:after {
    right: 0;
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.title_area h2 {
    margin: 15px 30px;
    
}
.course-list{
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
  }
  .course-item{
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .5);
    margin: 0 30px 30px 30px;
    position: relative;
  }
  .course-picture{
    width: 100%;
  }
  .course-introduction{
    width:85%;
    margin: 0 auto;
  }
  .inner {
	width: 1080px;
	margin: 0 auto;
}
section {
    padding: 80px 0px;
    display:block;
}
section p {
	font-size: 14px;
    line-height: 1.6;
}
section h2 {
	font-size: 26px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 2px;
}
section h3 {
	font-size: 25px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 2px;
}
.sec_01 .flex_lt, .sec_01 .flex_rt {
    width: 44%;
    margin: 3% 3% 0;
    padding: 20px;
    border-radius: 5px;
}
.sec_01 .flex_lt {
    background-color: #ecf8f8;
}
.sec_01 .flex_rt {
    background-color: #f8efec;
}
.circle{
    border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    width:  180px;       /* ※縦横を同値に */
    height: 180px;       /* ※縦横を同値に */
}
.table .img, .table .txt {
    display: table-cell;
    vertical-align: middle;
}
.flex_in {
    display: flex;
}
.flex_in h3{
    margin-bottom: 25px;
}
.back_gray{
    background-color: #f7f7f7;
    position:relative;
}
.sec_02 ul{
    display:flex;
}
.sec_02 li{
    width:31.333333%;
    margin:1%;
    padding:20px;
    background-color:#fff;
    border-radius:5px;

}


/* スマホ
------------------------------ */
@media screen and  (max-width: 500px) {

    .head h1{
        font-size:40px;
        position:absolute;
        top:25%;
        right:80%;
        width:300px;
        color:black;
        font-family:serif;
    }
    .head h2{
        
        font-size:30px;
        position:absolute;
        top:60%;
        left:15%; 
        width:400px;
        color:blue;
        font-family: 'Courier New', Courier, monospace;
    }
    .course-item{
        width: 70%;
        height: 50%;
      }
    
	.pc,#fnavi {
		display: none !important;
	}
	section {
		padding: 40px 0px;
	}
	.inner {
		width: 95% !important;
	}
	.ikt2,#footer_body {
		width: 98% !important;
	}
	img {
	    max-width: 100%;
	    height: auto;
	}
	.summary {
    	width: 90%;
    	font-size: 14px;
	}
	.table {
	    display: block;
	}
	.table .img, .table .txt {
    	display: block;
    	text-align: center;
    	padding: 0px !important;
	}
	.table .img {
    	margin: 10px 0px 15px;
	}
	.head_bg .inner {
	    padding-top: 100px;
	}
	#logo {
	    top: 20px;
	}
	.head_bg h1 {
	    width: 94%;
	    height: 160px;
	    background-size: contain !important;
	}
	.head_bg .l_tl2 {
	    margin-bottom: 10px;
	}
	.head_bg .l_tl2 span {
    	font-size: 14px;
	}
	.head_bg .l_tl2 p {
		font-size: 16px;
	}
	.logos_txt {
		display: none;
	}
	.sec_02 li,.sec_03 ul li,.sec_01 .flex_lt, .sec_01 .flex_rt,.pt_list li,.dif_list .flex_lt, .dif_list .flex_rt {
    	width: 100%;
    }
    .sec_02 li .table {
		display: table;
	}
    .sec_02 li .table .img,.sec_02 li .table .txt {
		display: table-cell;
    	text-align: left;
	}
    .sec_02 li .table .txt {
		padding-left: 15px !important;
    }
    .sec_02 .hp_type_t .img {
        width: 80%;
        margin: 0 auto 20px;
        display: block;
        padding: 10px !important;
    }
    .cost_area li {
        width: 48% !important;
        margin: 2% 1% 0% !important;
    }
    .accbox {
        width: 100%;
        padding: 0 3%;
	}
	.ikt2 {
        font-size: 18px;
	}
	.ikt2:after {
		content: "";
	}
	
	.pt_list h3 {
		position: relative;
		z-index: 11;
	}
	.sec_01 ul.check_list li {
        vertical-align: bottom;
        font-size: 13px;
        padding-left: 28px;
	}
	.sec_01 ul.check_list li:before {
        left: 0em;
    }

    
}

    @media screen and (min-width:1200px) {
 


.head h1{
    font-size:80px;
    position:absolute;
    top:15%;
    right:80%;
    width:800px;
    color:black;
    font-family:serif;
}
.head h2{
    
    font-size:50px;
    position:absolute;
    top:55%;
    right:75%;
    width:800px;
    color:blue;
    font-family: 'Courier New', Courier, monospace;

}
.course-list{
    display: flex;
    justify-content: center;
}
.course-item{
    width: 25%;
    height: 50%;
}

}

JavaScript
1$(function() {
2    
3    $(window).scroll(function (){
4        $('.fadein').each(function(){
5            var position = $(this).offset().top;
6            var scroll = $(window).scrollTop();
7            var windowHeight = $(window).height();
8            if (scroll > position - windowHeight+200){
9              $(this).addClass('active');
10            }
11        });
12    });
13  
14    $(window).scroll(function (){
15        $('.just').each(function(){
16            var position = $(this).offset().top;
17            var scroll = $(window).scrollTop();
18            var windowHeight = $(window).height();
19            if (scroll > position - windowHeight+200){
20              $(this).addClass('active');
21            }
22        });
23    });
24});
25