@charset "utf-8";

/*===============================================
●画面の横幅が769px以上
===============================================*/
@media screen and (min-width : 769px ){
#pc------------------------------------------- {
}
.helo {
	background-image: url("../images/news/h_bg.webp");
	height: 500px;
	background-position: center center;
	background-size: cover;
}
.helo .inner {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding-top: 200px;
}
.helo .inner h1 {
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3), 0px 0px 15px rgba(0, 0, 0, 0.3);
}
.helo .inner h1 span {
	color: #fff;
	font-size: 80px;
	font-family: 'Inter', 'Noto Serif JP', serif;
	display: block;
	margin-bottom: 40px;
	text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3), 0px 0px 15px rgba(0, 0, 0, 0.3);
}





/* 変数定義 */
:root {
  --main-red: #e62327;
  --border-color: #dddddd;
  --text-black: #000;
  --bg-gray: #f9f9f9;
}

/* 共通設定 */
.news-section {
  max-width: 900px;
  margin: 40px auto;
  margin-bottom: 100px;
}

/* SEO用：見た目には出さないが構造を伝えるクラス */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* タブナビゲーション */
.news-tabs .tabs-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  gap: 10px;
}

.news-tabs .tab-item a {
  display: block;
  padding: 5px 20px;
  border: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-black);
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s ease;
}

.news-tabs .tab-item.is-active a {
  background-color: var(--main-red);
  border-color: var(--main-red);
  color: #ffffff;
}

/* お知らせリスト */
.news-list {
  border-top: 1px solid var(--border-color);
}

.news-item {
  border-bottom: 1px solid var(--border-color);
}

.news-link {
  display: flex;
  align-items: center;
  padding: 20px 10px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.news-link:hover {
  background-color: var(--bg-gray);
}

.news-meta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.news-date {
  width: 130px;
  color: #000;
  font-weight: bold;
}

.news-category {
  display: inline-block;
  border: 1px solid var(--border-color);
  color: #000;
  font-size: 12px;
  padding: 3px 12px;
  margin-right: 20px;
  background: #fff;
}

.news-title {
  margin: 0;
  flex-grow: 1;
  font-size: 16px;
  font-weight: bold;
  color: var(--main-red); /* 画像に合わせ赤色、SEO的にもリンクと判別しやすい */
  line-height: 1.5;
  text-align: left;
}

/* 矢印アイコン */
.news-arrow {
  width: 10px;
  height: 10px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  transform: rotate(45deg);
  margin-left: 15px;
  flex-shrink: 0;
}

/* WP-PageNavi（プラグインの出力に合わせたスタイル） */
.wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  clear: both;
}

.wp-pagenavi a, 
.wp-pagenavi span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  text-decoration: none;
  border: 1px solid var(--border-color);
  color: var(--text-black);
  font-size: 14px;
}

.wp-pagenavi span.current {
  background-color: var(--main-red);
  border-color: var(--main-red);
  color: #fff;
}

.wp-pagenavi a:hover {
  background-color: var(--bg-gray);
}

.wp-pagenavi .previouspostslink, 
.wp-pagenavi .nextpostslink {
  border: none;
  font-size: 18px;
}

}



/*===============================================
●画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
	
/*===============================================
●sp-tablet
===============================================*/
#sptablet------------------------------------------- {
}
.helo {
	background-image: url("../images/news/h_bg.webp");
	height: 60vw;
	background-position: center right -22vw;
	background-size: cover;
}
.helo .inner {
	width: 90%;
	padding-top: 35vw;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.helo .inner h1 {
	color: #fff;
	font-size: 6vw;
	font-weight: bold;
	text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3), 0px 0px 15px rgba(0, 0, 0, 0.3), 0px 0px 15px rgba(0, 0, 0, 0.3), 0px 0px 15px rgba(0, 0, 0, 0.3), 0px 0px 15px rgba(0, 0, 0, 0.3);
}
.helo .inner h1 span {
	color: #fff;
	font-size: 12vw;
	font-family: 'Inter', 'Noto Serif JP', serif;
	display: block;
	margin-bottom: 5vw;
	text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3), 0px 0px 15px rgba(0, 0, 0, 0.3), 0px 0px 15px rgba(0, 0, 0, 0.3), 0px 0px 15px rgba(0, 0, 0, 0.3);
}





/* 変数定義 */
:root {
  --main-red: #e62327;
  --border-color: #dddddd;
  --text-black: #000;
  --bg-gray: #f9f9f9;
}

/* 共通設定 */
.news-section {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15vw;
}

/* SEO用：見た目には出さないが構造を伝えるクラス */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* タブナビゲーション */
.news-tabs .tabs-list {
  display: flex;
  gap : 3vw;
  margin-top: 5vw;
  margin-bottom: 5vw;
}

.news-tabs .tab-item a {
  display: block;
  border: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-black);
  font-size: 3.5vw;
  font-weight: bold;
  transition: all 0.2s ease;
  padding-left: 3vw;
  padding-right: 3vw;
}

.news-tabs .tab-item.is-active a {
  background-color: var(--main-red);
  border-color: var(--main-red);
  color: #ffffff;
}

/* お知らせリスト */
.news-list {
  border-top: 1px solid var(--border-color);
}

.news-item {
  border-bottom: 1px solid var(--border-color);
}

.news-link {
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.news-link:hover {
  background-color: var(--bg-gray);
}

.news-meta {
	text-align: left;
	padding-top: 3vw;
	padding-bottom: 2vw;
}

.news-date {
  color: #000;
  font-weight: bold;
  text-align: left;
}

.news-category {
  border: 1px solid var(--border-color);
  color: #000;
  font-size: 3.5vw;
  background: #fff;
  padding: 2vw;
  padding-top: 1vw;
  padding-bottom: 1vw;
}

.news-title {
  margin: 0;
  flex-grow: 1;
  font-size: 4vw;
  font-weight: bold;
  color: var(--main-red); /* 画像に合わせ赤色、SEO的にもリンクと判別しやすい */
  line-height: 1.5;
  text-align: left;
  padding-bottom: 3vw;
}



/* WP-PageNavi（プラグインの出力に合わせたスタイル） */
.wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  clear: both;
}

.wp-pagenavi a, 
.wp-pagenavi span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  text-decoration: none;
  border: 1px solid var(--border-color);
  color: var(--text-black);
  font-size: 14px;
}

.wp-pagenavi span.current {
  background-color: var(--main-red);
  border-color: var(--main-red);
  color: #fff;
}

.wp-pagenavi a:hover {
  background-color: var(--bg-gray);
}

.wp-pagenavi .previouspostslink, 
.wp-pagenavi .nextpostslink {
  border: none;
  font-size: 18px;
}

}



/*===============================================
●画面の横幅が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------------------------------------------- {
}
}