@charset "utf-8";
/* フォーカス時のスムーズスクロールを無効化 */
html:focus-within {
    scroll-behavior: auto;
}
/*-----ファーストビュー sp-----*/
.first_view{
	padding-top: 60px;
	
	h1{
		position: relative;
		width: min(88%,1620px);
		margin: 0 auto;
		font-size: var(--font-size46);
		letter-spacing: .06em;
		
		&::after{
			position: absolute;
			content: '';
			display: inline-block;
			width: 5%;
			bottom: 50%;
			left: -7%;
			border-bottom: solid 1px #000;
		}
	}
	
}
/*-----お知らせ sp-----*/
.news{
  
  .container{
    width: min(90%,1480px);
    margin: 0 auto;
    padding-top: var(--px100);
	  padding-bottom: var(--px60);
    
     h1{
      font-size: var(--font-size36);
      line-height: 1.6;
      padding-top: var(--px80);
      padding-bottom: var(--px40);
      text-align: center;
    }
    
    .news_search{
      width: 100%;
      margin-bottom: var(--px30);
      border-bottom: 1px solid #ccc;

        /* フォーム */
        form{
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          align-items: center;
          gap: 12px 6px;
          
          padding-bottom: var(--px20);
        }

        /* テキストボックス,セレクトボックス */
        input[type="text"],select{
          width: min(65%,300px);
          height: 2.6em;
          padding: 0 1em;
          font-size: var(--font-size16);
          border: 1px solid #ccc;
          border-radius: 5px;
          outline: none;
          box-sizing: border-box;
          transition: border-color .3s;
        }

        input[type="text"]:focus{
          border-color: #9FCDFF;
          box-shadow: 1px 1px 10px #9FCDFF;
        }
      /* セレクトボックス */
        select{
          padding: 0 1rem;
          border: 1px solid #ccc;
          background: #fff;
          cursor: pointer;
        }

        /* ボタン */
        button{
          width: min(30%,90px);
          height: 2.6em;
          font-size: var(--font-size16);
          border: none;
          border-radius: 5px;
          background: #428bca;
          color: #fff;
          cursor: pointer;
          transition: background .3s;
        }

        button:hover{
            background: #357ebd;
        }
    }

    
    .news_list li{
        border-bottom:1px solid #e5e5e5;
      
        display:flex;
        flex-direction:column;
        gap: var(--px40);
        padding: var(--px30) 0;
        text-decoration:none;
        transition:.3s;
    }
    /* スクロール時の余白 sp */
    .news_list li[id]{
      scroll-margin-top: 0px;
    }

    .news_img{
        width:min(100%,380px);
        aspect-ratio:16 / 10;
        overflow:hidden;
        border-radius: 5px;
    }

    .news_img img{
        width:100%;
        height:100%;
        display:block;
        object-fit:cover;
        transition:transform .4s;
    }

    .news_body{
        flex:1;

        .news_pdf{
          margin-top: var(--px20);
        }
        
        a{
            color:var(--main-color);
            text-decoration:underline;
        }
    }

    .news_info{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap: var(--px20);
        margin-bottom:var(--px10);
    }

    .news_category{
        display:inline-block;
        padding: 5px 12px;
        background:var(--main-color);
        color:#fff;
        border-radius:999px;
        font-size:var(--font-size14);
        line-height:1;
    }

    .news_title{
        margin-bottom: 3px;
        font-size:var(--font-size24);
    }

    .news_text{
      margin-bottom:var(--px10);
    }

    .news_empty{
      padding: var(--px100) 0 var(--px120);
      border-bottom: 1px solid #e5e5e5;
      text-align: center;
      font-size: var(--font-size18);
      line-height: 1.8;
    }
  }
  
  .pager{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:60px;
  }

  .pager_list{
      display:flex;
      align-items:center;
      gap:8px;
  }

  .pager_list a,
  .pager_list span,
  .pager_prev,
  .pager_next{
      display:flex;
      justify-content:center;
      align-items:center;
      width:42px;
      height:42px;
      border:1px solid #ddd;
      border-radius:8px;
      text-decoration:none;
      color:#333;
      background:#fff;
      transition:.3s;
      font-weight:600;
  }

  .pager_list a:hover,
  .pager_prev:hover,
  .pager_next:hover{
      background:var(--main-color);
      border-color:var(--main-color);
      color:#fff;
  }

  .pager_list .is-current{
      background:var(--main-color);
      border-color:var(--main-color);
      color:#fff;
      pointer-events:none;
  }
  
}
.pdf_icon{
  width:22px;
  margin-left:10px;
}
.link_icon{
  width:15px;
  margin-left:7px;
}
@media (min-width:768px){
/*-----ファーストビュー tab-----*/
.first_view{
	padding-top: clamp(140px,15vw,190px) ;
}
/*-----お知らせ tab-----*/
.news{
  
  .container{

    /* スクロール時の余白 tab */
    .news_list li[id]{
      scroll-margin-top: 60px;
    }
    
    .news_search{
      
      form{
        justify-content: flex-end;
      }
      
      /* テキストボックス,セレクトボックス */
        input[type="text"],select{
          width: min(42%,280px);
        }
      /* セレクトボックス */
        select{
          margin-left: 1em;
        }

    } 
	
  }
}


}
@media (min-width:1024px){
/*-----ファーストビュー pc-----*/
.first_view{
	
	h1{
		
		&::after{
			border-bottom: solid 2px #000;
		}
	}
}
/*-----お知らせ pc-----*/
.news{
  
  .container{

    /* スクロール時の余白 pc */
    .news_list li[id]{
      scroll-margin-top: 120px;
    }
    
    .news_search{
      
      /* テキストボックス,セレクトボックス */
        input[type="text"],select{
          width: min(42%,320px);
        }
      /* セレクトボックス */
        select{
          margin-left: 2em;
        }
    } 
    
    .news_list li{
      flex-direction:row;
      align-items:start;
    }

    .news_img{
        width:min(40%,480px);
        flex-shrink:0;
      order: 2;
    }
  }  
  
  .pager{
    gap:18px;
    margin-top:80px;
  }

  .pager_list{
      gap:12px;
  }

  .pager_list a,
  .pager_list span,
  .pager_prev,
  .pager_next{
      width:48px;
      height:48px;
  }
}
}
@media (min-width:1280px){
/*----- 1280 -----*/
 
}

@media (min-width:1870px){ 
.first_view{
	
	h1{
		
		&::after{
			width: calc((100vw - 1620px - 1.5em) / 2);
			left: calc((1620px - 100vw) / 2);
		}
	}
}
  
}