@charset "UTF-8";

/*******************************************************************************
	お知らせ共通
 *******************************************************************************/

/* news.cssからの流用 */
.main_container {
	position: relative;
}

.main_container::before {
	display: block;
	position: absolute;
	top: 80px;
	left: 50%;
	z-index: -1;
	transform: translateX(-50%);
	width: 1000%;
	height: 1000000px;
	background-repeat: repeat;
	background-position: center top;
	content: "";
}

.archive_blog-nav {
	display: block;
	max-width: 1000px;
	width: 75%;
	margin: 0 auto;
	border-top: 1px solid #D8D8D8; /* ← ここに移動 */
}

.archive_blog-list {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	flex-direction: row;
}

.archive_blog-item {
	display: flex;
	flex-direction: column;
	width:100%;
	gap: 10px;
	overflow: initial;
	padding: 0;
	border-bottom: 1px solid #D8D8D8 ;
	padding: 30px;
}

.archive_blog-item a {
	transition: all 0.6s;
}

.blog-categories {
	margin-top: 10px;
}

/* カテゴリーとタグのボタンスタイル */
.blog-category-tag,
.blog-post-tag {
    display: inline-block;
    padding: 2px 15px;
    border: 1px solid #707070;
    border-radius: 20px;
    text-decoration: none;
    color: #1A1F19;
    font-size: 0.875rem; /* 14px */
	font-weight: bold;
    transition: all 0.3s ease;
	cursor: pointer; /* カーソルをポインターに */
}

/* ホバー時のスタイル（任意） */
.blog-category-tag:hover,
.blog-post-tag:hover {
    background-color: #707070;
    color: #ffffff;
    border-color: #707070;
}

/* カテゴリーとタグの間隔調整 */
.blog-categories,
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.archive_blog-title {
	font-weight: bold;
	font-size: clamp(1.125rem, 0.822rem + 0.63vw, 1.25rem);
	line-height: 1.6; /* 行間を広げて読みやすく */
}

/* リンクタグ */
.archive_blog-title a {
    display: inline; /* テキスト部分のみクリック可能 */
    transition: color 0.3s ease;
    cursor: pointer;
    color: #1A1F19;
    text-decoration: none;
    /* white-space: nowrap を削除 */
    /* text-overflow: ellipsis を削除 */
}

.archive_blog-title a:hover {
    color: #707070; /* ホバー時の色（グレー） */
}

.blog_select {
	max-width: 345px;
	width: 90%;
	margin: auto;
	margin-top: 40px;
	padding: 15.5px 40px;
	border: 2px solid #25425c;
	background-color: #25425c;
	background-image: url(../images/news_arrow_bottom.webp);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	color: #ffffff;
	font-size: 18px;
	text-align: center;
	cursor: pointer; /* カーソルをポインターに */
    transition: all 0.3s ease; /* スムーズな変化 */

	/* 長いテキストを省略 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* オプション部分（ドロップダウンメニュー内）は省略しない */
.blog_select option {
    white-space: normal; /* 折り返しを許可 */
}

/* ホバー時の効果 */
.blog_select:hover {
    background-color: #1a3347; /* 少し暗めの青 */
    border-color: #1a3347;
    transform: translateY(-2px); /* 少し浮き上がる効果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

/* フォーカス時の効果（キーボード操作・タップ時） */
.blog_select:focus {
    outline: none;
    border-color: #1a3347;
    box-shadow: 0 0 0 3px rgba(37, 66, 92, 0.3);
}

/* PC画面 (768px以上) */
@media screen and (min-width: 768px) {
	.main_container {
		padding-top: calc(80px + 50px);
		padding-bottom: 100px;
	}
	
	.main_container::before {
		background-image: url(../images/access_bg-pc.png);
		background-size: 1920px 1610px;
		opacity: 0.4;
	}
	
	.archive_blog-nav {
		margin-top: 55px;
	}
	
	/* .archive_blog-item {
		width: 31.5%;
	} */
	
	.archive_pagination {
		margin-top: 50px;
	}
}

/* スマホ画面 (767px以下) */
@media screen and (max-width: 767px) {
	.main_container {
		padding-top: calc(60px + 15px);
		padding-bottom: 110px;
	}
	
	.main_container::before {
		top: 60px;
		background-image: url(../images/access_bg-mb.png);
		background-size: 375px 1388px;
		opacity: 0.5;
	}
	
	.archive_blog-nav {
		margin-top: 35px;
		width: 90%;
	}
	
	.blog_select {
		padding-left: 10px;
		font-size: 16px;
		text-align: center;
	}
	
	.archive_pagination {
		margin-top: 30px;
	}

	.archive_blog-item {
		padding: 15px 8px;
	}
}

/* 中サイズ画面 (501px以上) */
@media screen and (min-width: 501px) and (max-width: 767px) {
	.archive_blog-nav {
		max-width: 640px;
	}
}

/* 小サイズ画面 (500px以下) */
@media screen and (max-width: 500px) {
	.archive_blog-nav {
		max-width: 430px;
	}
}

/*******************************************************************************
    投稿がない場合のスタイル
 *******************************************************************************/
.no-posts-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    width: 75%;
    margin: 55px auto 0;
    padding: 60px 20px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #D8D8D8;
    border-radius: 8px;
}

.no-posts-text {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    color: #707070;
    margin-bottom: 30px;
    line-height: 1.8;
}

.no-posts-link {
    display: inline-block;
    padding: 15px 40px;
    background-color: #25425c;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #25425c;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.no-posts-link:hover {
    background-color: #ffffff;
    color: #25425c;
}

/* スマホ画面対応 */
@media screen and (max-width: 767px) {
    .no-posts-message {
        width: 90%;
        margin-top: 35px;
        padding: 40px 15px;
    }

    .no-posts-text {
        margin-bottom: 20px;
    }

    .no-posts-link {
        padding: 12px 30px;
        font-size: 14px;
    }
}