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

.main{
    width: 83%;
    height: 100%;
    margin-left: 17%;
   /* border: solid red;*/
    
}
.first-view{
  width: 100%;
  overflow: hidden;
 white-space: nowrap;
 position: relative;
}
h1{
    font-size: 100px;
    font-weight: 800;
    position: absolute;
     top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
     /*right: 30%;
     top: 300px;*/
    color: #fff;
    text-shadow: 0.3px 0.3px 0px gray, 0px 0px 10px #fff, 0px 0px 18px #fff;
    opacity: 0.9.5;
}
@media(max-width:1200px){
    h1{
    font-size: 70px;
}}

.first-view img{
  width: inherit;
  height: inherit;
  margin: 0;
  padding: 0;
  border: none;
}
@keyframes slide-4 {
  0% { margin-left: 0; }
  33% { margin-left: -100%; }
  66% { margin-left: -200%; }
  100% { margin-left: -300%; }
}
.first-view > :nth-child(2) {
  animation-name: slide-4;     /* 作成したキーフレームを使う */
  animation-duration: 60s;    /* アニメーション全体を5秒にする */
  animation-delay: 0s;       /* 直ちにアニメーション開始する */
  animation-iteration-count: infinite; /* 永遠にアニメーションする */
}
.rinen{
    position: relative;
}
.rinen h2{
    font-size: 46px;
    font-weight: 700; text-align: center;
    margin-top: 80px;
    margin-bottom: 100px;
}
.philosophy{
    font-size: 80px;
    transform: rotate(90deg);
    position: absolute;
     left: -350px;
     top: 400px;
    opacity: 0.1;
}
.text{
    font-size: 22px;
    line-height: 2;
    padding-bottom: 30px;
    inline-size: 700px;
    margin-left: auto;
    margin-right: auto;
}
.news h2{
    font-size: 46px;
    font-weight: 700; text-align: center;
    margin-top: 300px;
    margin-bottom: 40px;
}
.news-list{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-top: solid 0.5px #59544b;
    border-bottom: solid 0.5px #59544b;
}
.news-list ul li{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    font-size: 24px;
    font-weight: 500;
    display: flex;
}
.news-list ul li>a{
    padding-left: 150px;
}
.news-list ul li>a:first-child:hover{
    color: #69821b;
}
.news-list ul li>a:nth-child(2):hover{
    color: #69821b;
}
.news-list ul li>a:nth-child(3):hover{
    color: #69821b;
}
.news-list ul li>a:nth-child(4):hover{
    color: #69821b;
}
.news-list ul li>a:nth-child(5):hover{
    color: #69821b;
}
.news-list ul li>a:nth-child(6):hover{
    color: #69821b;
}
.campus{
    position: relative;
}
.campus h2{
    font-size: 46px;
    font-weight: 700; 
    text-align: center;
    margin-top: 300px;
    margin-bottom: 40px;
    color: #59544b;
}
.university-campus{
    font-size: 70px;
    transform: rotate(90deg);
    position: absolute;
     right: -270px;
     bottom: 45%;
    opacity: 0.1;
}
.campus{
    padding-bottom: 150px;
}
.campus-name{
    display: flex;
    font-size: 28px;
    padding-top: 100px;
}
.kashiwa-c p,.koshigaya-c p{
    text-align: center;
    padding-bottom: 20px;
}
.campus-name img{
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 4px 4px 4px 2px gray;
}
.campus-name a:hover{
    opacity: 0.5;
    transition-duration: 1s;
}
/*====================アニメーション==================*/
.fadeUpTrigger{
opacity: 0;
}
.fadeUp {
    animation-name: fadeUpAnime;
    animation-delay: 0.8s;
    animation-duration: 2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
/*========================javascript==========================*/
.underline-before {
    
    transform: rotate(45deg);
    
	background: linear-gradient(#59544b, #59544b) 0 100%/0 1px no-repeat;
	/*左から、カラー（始点と終点それぞれ同じものを指定）、position / サイズ横縦 繰り返しの有無 */

	transition: background 3s;
	/*トランジションの設定。下線を引く動きをアニメーションにするのに必要 */

	text-decoration: none;
	/*テキストの装飾の設定 */
}

.underline-after {
	background-size: 100% 1px;
  /* 変化後のスタイル。横サイズを0から100%に変えることで指定の文字列に下線を引く */
}

@media(max-width:428px){
    
    .main{
        width: 100%;
        padding-top: 60px;
        margin-left: 0;
    }
    h1{
    position: absolute;
      top: 50%;
      left: 50%;
    transform: translate(-50%,-50%);
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0.3px 0.3px 0px gray, 0px 0px 10px #fff, 0px 0px 18px #fff;
    opacity: 0.9.5;
}
    
/*=====================================================================  */  
    @media(max-width:350px){
    h1{
    font-size: 30px;
}}
/*===================================================================== */   
    
    .rinen h2{
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
}
    .philosophy{
    font-size: 40px;
     top: 45%;
     left: -45%;
    opacity: 0.1;
}
    .text{
    font-size: 11px;
    padding-bottom: 100px;
    inline-size: 250px;
        
}
    .news h2{
    font-size: 20px;
    font-weight: 700; 
    text-align: center;
    margin-top: 120px;
    margin-bottom: 20px;
}
 .news-list{
    width: 90%; 
    
}   
    .news-list ul li{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
}
    .news-list ul li>a{
    padding-left: 100px;
}
    .university-campus{
    display: none;
}
    .campus{
    margin-top: -80px;
   
    
}
.campus h2{
    font-size: 22px;
    }
.campus-name{
    flex-direction: column;
    font-size: 15px;
    padding-top: 20px;
}
.kashiwa-c p,.koshigaya-c p{
    padding-bottom: 20px;
}
    .koshigaya-c{
        padding-top: 100px;
    }
.campus-name img{
    width: 250px;
    height: 250px;
}


}