@charset "utf-8";

/* ============================================= ページタイトル */
.page_title {
	width: 1260px;
	max-width: 90%;
	margin: 0 auto;
	padding: 30px 40px;
	background: url(../imgs/news/main_title_bg_pc.jpg) no-repeat center;
	background-size: cover;
}
.page_title .text h1 {
	text-align: center;
	font-weight: 700;
	font-size: 30px;
	color: var(--color-primary);
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.page_title {
		width: 100%;
		max-width: 100%;
		padding: 30px 10%;
		background: url(../imgs/news/main_title_bg_sp.jpg) no-repeat center;
		background-size: 100% auto;
	}
	.page_title .text h1 {
		text-align: left;
		font-size: 2.5rem;
	}
}


/* ============================================= contents */
/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.subpage.news_archive .contents {
		margin-top: 30px;
	}

	.subpage.news_single .contents {
		margin-top: 40px;
	}
}


/* ============================================= news_inner */
.news_inner {
	display: flex;
	gap: 64px;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.news_inner {
		flex-direction: column-reverse;
	}
}


/* ============================================= news_main */
.news_main {
	max-width: 736px;
	width: 100%;
}


/* ============================================= news_archive */
.archive_heading {
	width: 100%;
	padding: 10px 15px;
	background: linear-gradient(90deg, #006EC8 0%, #40B7FF 100%);
	font-size: 2.0rem;
	font-weight: 700;
	color: var(--color-white);
}

.archive_list{
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--color-border-1) 1px solid;
}
.archive_item{
	border-bottom: var(--color-border-1) 1px solid;
}

/* 行全体をリンク化 */
.archive_link{
	text-decoration: none;
	display: grid;
	grid-template-columns: auto 11ch 1fr; /* カテゴリ / 日付 / タイトル */
	align-items: center;
	gap: 16px;
	padding: 2rem 2rem 2rem 0;
	color: inherit;
}
/*
.archive_link:focus-visible{

}
*/

/* ラベルと日付を確実に中央合わせしたい場合の”保険” */
.archive_cat,
.archive_date {
	align-self: center;   /* 必要なければ外してOK */
}

/* カテゴリラベル */
.archive_cat{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 70px;
	padding: 0 0 2px;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--color-white);
	white-space: nowrap;
}
.archive_cat.is_information{ background: var(--color-news-information); }
.archive_cat.is_event{ background: var(--color-news-event); }
.archive_cat.is_new_products{ background: var(--color-news-new_products); }
.archive_cat.is_topics{ background: var(--color-news-topics); }
.archive_cat.is_important{ background: var(--color-news-important); }

/* 日付 */
.archive_date{
	white-space: nowrap;
	font-size: 1.4rem;
	color: var(--color-black);
}

/* タイトル */
.archive_title{
	transition: 0.3s;
	text-decoration: underline;
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--color-secondary);
}

/* ------------------------------------- for pc */
@media ( min-width : 768px ) {
	/*
	.archive_link:hover{
		
	}
	*/
	.archive_link:hover .archive_title{
		/* transform: translateX(2rem); */
		transform: translateX(1rem);
	}
	
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.archive_link {
		grid-template-columns: 70px auto; /* カテゴリと日付を横並びに */
		grid-template-areas:
			"cat date"
			"title title"; /* タイトルを2行目に */
		gap: 6px 8px; /* 行間と列間 */
		align-items: start;
	}

	.archive_cat {
		grid-area: cat;
	}

	.archive_date {
		grid-area: date;
	}

	.archive_title {
		grid-area: title;
		display: block;
		margin-top: 4px;
	}
}


/* ============================================= news_single */
.single_date {
	text-align: right;
}

/* 記事本文 - ここから */
.single_content {
	line-height: 1.875;
}

.single_content a {
	color: var(--color-secondary);
}

.single_content .title-a { /* 見出しデザイン */
	position: relative;
	display: inline-block;
	margin-bottom: 2rem;
	padding: 0 16px 0 0;
	font-size: 1.8rem;
	font-weight: 700;
}

.single_content .title-a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translateY(4px);
	width: 100%;
	height: 1px;
	background: var(--color-secondary);
}

.single_content .title-a::after {
	content: "";
	position: absolute;
	right: -1px;
	bottom: -4px;
	width: 1px;
	height: 10px;
	border-right: var(--color-secondary) 1px solid;
}

.single_content h4,
.single_content h5,
.single_content h6 {
	font-size: 1.6rem;
}

.single_content p,
.single_content table {
	margin-bottom: 2rem;
}

.single_content table.table {
	border-collapse: collapse;
	width: 100%;
}

.single_content table.table th {
	padding: 10px 12px;
	background: var(--color-background-1);
	border: var(--color-border-1) 1px solid;
}

.single_content table td {
	/* padding-bottom: 26px; */
	vertical-align: top;
	text-align: center;
	font-size: 1.2rem;
}

.single_content table.table td {
	padding: 10px 12px;
	background: var(--color-white);
	border: var(--color-border-1) 1px solid;
	text-align: center;
	font-size: 1.6rem;
}

.single_content table td p {
	margin-top: 5px;
}

.single_content table td img {
	vertical-align: top;
	margin: 0 auto;
}

.single_content ul {
	list-style-type: disc;
	list-style-position: inside;
	padding: 0 0 0 30px;
}

.single_content ul li {
	text-indent: -2.3rem;
}

.single_content hr {
	margin: 0 0 1.5rem;
}
/* 記事本文 - ここまで */

.single_new_posts_heading {
	font-size: 2.0rem;
	font-weight: 700;
	color: var(--color-secondary);
}

.news_single .archive_link_back a {
	background-color: var(--color-secondary);
	border-radius: 4px;
	color: var(--color-white);
}

.news_single .archive_link_back a:hover {
	background-color: var(--color-white);
	color: var(--color-secondary);
}


/* ============================================= サイドバー（カテゴリーやアーカイブ） */
.news_sidebar {
	max-width: 128px;
	width: 100%;
}

.news_sidebar .heading {
	padding: 0 0 10px;
	border-bottom: var(--color-border-1) 1px solid;
	font-size: 1.6rem;
	font-weight: 700;
	color: #4d4d4d;
}

.news_sidebar .links {
	margin: 24px 0 0;
	padding: 0;
}

.news_sidebar .links a {
	text-decoration: none;
	font-size: 1.6rem;
	line-height: 185%;
	color: #4d4d4d;
}

/* 選択中の見た目（太字） */
.news_sidebar .links a:hover,
.news_sidebar .links .is-current > a {
	font-weight: 700;
	color: var(--color-black);
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.news_sidebar {
		max-width: none;
	}
	
	.news_sidebar .links {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
}