@charset "utf-8";

/*===============================================
●画面の横幅が769px以上
===============================================*/
@media screen and (min-width : 769px ){
#pc------------------------------------------- {
}
.helo {
	margin-top: 70px;
	height: 200px;
	background-color: #DFF5FA;
	position: relative;
}
.helo h1 {
	color: #0096d2;
	font-size: 26px;
	font-weight: 500;
	padding-top: 85px;
}



.news_section {
	width: 924px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	margin-top: 120px;
	margin-bottom: 120px;
}
.news_section a {
	color: #000;
	text-decoration: none;
}
.news_section li:hover p {
	text-decoration: underline;
}
.news_section .news-list__date {
	font-size: 16px;
	font-weight: bold;
	margin-right: 10px;
}
.news-list__category {
	width: 100px;
	height: 22px;
	line-height: 22px;
	background-color: #DFE0E0;
	font-size: 13px;
	font-weight: bold;
	display: inline-block;
	text-align: center;
}
.news-list__text {
	font-size: 16px;
	margin-top: 10px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #000;
}





/* WP-PageNav 全体のスタイル */
.wp-pagenav {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 10px;               /* ボタン間の余白 */
    clear: both;
    margin: 20px 0;
	margin-top: 100px;
}

/* 各ボタンの共通スタイル */
.wp-pagenav a, 
.wp-pagenav span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;            /* 正方形の幅 */
    height: 40px;           /* 正方形の高さ */
    text-decoration: none;
    font-size: 21px;
    border: none;           /* 枠線なし */
    transition: background-color 0.3s ease;
}

/* 現在のページのスタイル (濃い青) */
.wp-pagenav span.current {
    background-color: #009ad6; /* 画像に近いメインの青 */
    color: #ffffff;
    font-weight: normal;
}

/* 通常のリンクボタンのスタイル (薄い青) */
.wp-pagenav a {
    background-color: #dcf2f7; /* 薄い水色 */
    color: #333333;
}

/* マウスホバー時のスタイル */
.wp-pagenav a:hover {
    background-color: #009ad6; /* ホバーで濃い青に */
    color: #ffffff;
}

/* 「次へ」ボタン ( > ) の微調整 */
.wp-pagenav a.nextpostslink {
    font-family: sans-serif;
    font-weight: 500;
}
.nav-links {
	display: flex;
	gap: 10px;
}
}



/*===============================================
●画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
	
/*===============================================
●sp-tablet
===============================================*/
#sptablet------------------------------------------- {
}
.helo {
	margin-top: 13.3333333333vw;
	height: 40vw;
	background-color: #DFF5FA;
	position: relative;
}
.helo h1 {
	color: #0096d2;
	font-size: 6vw;
	font-weight: 500;
	padding-top: 16vw;
}



.news_section {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	margin-top: 15vw;
	margin-bottom: 15vw;
}
.news_section a {
	color: #000;
	text-decoration: none;
}
.news_section .news-list__date {
	font-size: 3.5vw;
	font-weight: bold;
	margin-right: 1vw;
}
.news-list__category {
	width: 25vw;
	height: 6vw;
	line-height: 6vw;
	background-color: #DFE0E0;
	font-size: 3.5vw;
	font-weight: bold;
	display: inline-block;
	text-align: center;
}
.news-list__text {
	margin-top: 2vw;
	padding-bottom: 5vw;
	margin-bottom: 5vw;
	border-bottom: 1px solid #000;
}





/* WP-PageNav 全体のスタイル */
.wp-pagenav {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 2vw;               /* ボタン間の余白 */
    clear: both;
    margin: 20px 0;
	margin-top: 12vw;
}

/* 各ボタンの共通スタイル */
.wp-pagenav a, 
.wp-pagenav span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10vw;            /* 正方形の幅 */
    height: 10vw;           /* 正方形の高さ */
    text-decoration: none;
    font-size: 4vw;
    border: none;           /* 枠線なし */
    transition: background-color 0.3s ease;
}

/* 現在のページのスタイル (濃い青) */
.wp-pagenav span.current {
    background-color: #009ad6; /* 画像に近いメインの青 */
    color: #ffffff;
    font-weight: normal;
}

/* 通常のリンクボタンのスタイル (薄い青) */
.wp-pagenav a {
    background-color: #dcf2f7; /* 薄い水色 */
    color: #333333;
}

/* マウスホバー時のスタイル */
.wp-pagenav a:hover {
    background-color: #009ad6; /* ホバーで濃い青に */
    color: #ffffff;
}

/* 「次へ」ボタン ( > ) の微調整 */
.wp-pagenav a.nextpostslink {
    font-family: sans-serif;
    font-weight: 500;
}
.nav-links {
	display: flex;
	gap: 2vw;
}
}



/*===============================================
●画面の横幅が400pxまで
===============================================*/
@media screen and (max-width:400px){
/*===============================================
●sp400
===============================================*/
#sp400------------------------------------------- {
}
}



/*===============================================
●画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){
/*===============================================
●sp320
===============================================*/
#sp320------------------------------------------- {
}
}



/*===============================================
●画面の横幅が481pxから768pxまで
===============================================*/
@media screen and (min-width:481px) and (max-width:768px) {
/*===============================================
●tablet
===============================================*/
#tab------------------------------------------- {
}
}