@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:1025px){
#news {
	width: 100%;
	height: auto;
}
	.news__inner {
		width: 90%;
		max-width: 1086px;
		height: auto;
		padding: 0 0 40px;
		margin: 0 auto;
	}
		.news__cat_wrap {
			width: 100%;
			height: auto;
			margin-bottom: 45px;
		}
			.news__cat_list {
				width: 100%;
				height: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: solid 1px var(--color--gray);
			}
				.news__cat_item {
					flex: 1;
					height: auto;
				}
					.news__cat_item__link {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 64px;
						background-color: var(--color--creamgray);
						font-size: 1.25rem;
						font-weight: 700;
						letter-spacing: 0.04em;
						color: var(--color--gray);
						position: relative;
						transition: .3s;
					}
					.active .news__cat_item__link {
						background-color: var(--color--darkgray);
						color: #fff;
						pointer-events: none;
					}
						.news__cat_item_icon {
							width: 6.5px;
							height: auto;
							margin-left: 15px;
							fill: var(--color--gray);
							transition: .3s;
						}
						.active .news__cat_item_icon {
							fill: #fff;
							transform: rotate(90deg);
						}

		.news__years_wrap {
			width: 100%;
			height: auto;
			margin-bottom: 60px;
		}
			.news__years_list {
				width: 100%;
				height: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 45px;
			}
				.news__years_item {
					width: auto;
					height: auto;
				}
					.news__years_item__link {
						font-size: 1rem;
						font-weight: 700;
						letter-spacing: 0.05em;
						color: var(--color--black);
						position: relative;
					}
						.news__years_item__link::after {
							content: '';
							display: block;
							width: 100%;
							height: 2px;
							background-color: var(--color--black);
							opacity: 0;
							position: absolute;
							bottom: -8px;
							left: 0;
						}
						.active .news__years_item__link::after {
							opacity: 1;
						}

		.news__list_wrap {
			width: 100%;
			max-width: 1000px;
			height: auto;
			margin: 0 auto;
		}
			.news__list {
				width: 100%;
				height: auto;
			}
				.news__item {
					width: 100%;
					height: auto;
					margin-bottom: 14px;
				}
				.news__item:last-of-type {
					margin-bottom: 0;
				}
					.news__item__link {
						width: 100%;
						height: auto;
						display: flex;
						justify-content: space-between;
						align-items: stretch;
						border: solid 1px rgba(0, 0, 0, 0);
						transition: .3s;
					}
					.news__item__link:hover {
						border: solid 1px var(--color--dark_creamgray);
					}
						.news__image {
							width: 27%;
							height: auto;
						}
							.news__image img {
								width: 100%;
								height: auto;
							}
						.news__contents {
							width: 73%;
							height: auto;
							padding: 25px 50px 25px 30px;
							background-color: var(--color--creamgray);
							position: relative;
						}
							.news__contents::before,
							.news__contents::after {
								content: '';
								display: block;
								width: 10px;
								height: 2.5px;
								border-radius: 1.15px;
								background-color: var(--color--black);
								position: absolute;
								bottom: 35px;
								transition: .3s;
							}
							.news__contents::before {
								right: 22px;
								transform: rotate(45deg) translate(0,-4px);
							}
							.news__contents::after {
								right: 22px;
								transform: rotate(-45deg) translate(0,4px);
							}
							.news__contents:hover::before,
							.news__contents:hover::after {
								right: 19px;
							}
							.news__info {
								width: 100%;
								height: auto;
								display: flex;
								justify-content: flex-start;
								align-items: center;
							}
								.news__date {
									display: block;
									width: auto;
									height: 18px;
									padding: 0 0;
									margin-right: 20px;
									font-size: 0.875rem;
									font-weight: 500;
									line-height: 18px;
									letter-spacing: 0.08em;
									color: var(--color--gray);
								}
								.news__cat {
									display: flex;
									justify-content: center;
									align-items: center;
									width: 100px;
									height: 18px;
									padding: 0;
									margin: 0 5px 0 0;
									font-size: 0.75rem;
									font-weight: 700;
									line-height: 1;
									letter-spacing: 0em;
									color: #fff;
									text-align: center;
								}
								.news__cat.i-campaign,.news__cat.category01 {background-color: var(--color--skyblue);}
								.news__cat.i-iteminfo, .news__cat.category02 {background-color: var(--color--blue);}
								.news__cat.i-shop, .news__cat.category03 {background-color: var(--color--yellow);}
								.news__cat.i-csr, .news__cat.category04 {background-color: var(--color--gray);}
								.news__cat.i-info, .news__cat.category05 {background-color: var(--color--black);}
							.news__details {
								width: 100%;
								height: auto;
								margin: 11px auto 0;
							}
								.news__details_heading {
									width: 100%;
									height: auto;
									margin-bottom: 10px;
									font-size: 1.125rem;
									font-weight: 700;
									line-height: 1.6;
									letter-spacing: 0.04rem;
								}
								.news__details_txt {
									width: 100%;
									height: auto;
									font-size: 0.875rem;
									font-weight: 500px;
									line-height: 2;
									letter-spacing: 0.03em;
								}
			#search-area {
				width: 100%;
				height: auto;
				padding: 65px 0;
			}
				.search-paging {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: center;
					align-items: center;
					column-gap: 12px;
				}
					.search-paging li {
						width: 32px;
						height: 32px;
						border-radius: 50%;
						overflow: hidden;
					}
						.arrow a {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
						}
							.arrow a svg {
								width: 6.5px;
								height: auto;
								fill: var(--color--black);
							}
					.prev {
						margin-right: 32px;
					}
					.next {
						margin-left: 32px;
					}
					.num {
						font-family: 'Satoshi', sans-serif;
						font-size: 1rem;
						font-weight: 500;
						line-height: 1;
						letter-spacing: 0em;
					}
						.num a {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							background-color: var(--color--dark_lightgray);
							color: var(--color--light_darkgray);
						}
						.num strong {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							background-color: var(--color--black);
							color: #fff;
						}
						.anchor-list-next-hidden {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
						}
}

/* Tablet ================================================== */
@media all and (min-width:600px) and (max-width:1024px){
#news {
	width: 100%;
	height: auto;
}
	.news__inner {
		width: 90%;
		max-width: 1086px;
		height: auto;
		padding: 0 0 40px;
		margin: 0 auto;
	}
		.news__cat_wrap {
			width: 100%;
			height: auto;
			margin-bottom: 35px;
		}
			.news__cat_list {
				width: 100%;
				height: auto;
				padding: 0 0 20px;
				border-bottom: solid 1px var(--color--gray);
			}
				.news__cat_item {
					width: 100%;
					height: auto;
					margin-bottom: 8px;
				}
				.news__cat_item:last-of-type {
					margin-bottom: 0;
				}
					.news__cat_item__link {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 54px;
						background-color: var(--color--creamgray);
						font-size: 1.125rem;
						font-weight: 700;
						letter-spacing: 0.04em;
						color: var(--color--gray);
						position: relative;
						transition: .3s;
					}
					.active .news__cat_item__link {
						background-color: var(--color--darkgray);
						color: #fff;
						pointer-events: none;
					}
						.news__cat_item_icon {
							width: 6.5px;
							height: auto;
							margin-left: 15px;
							fill: var(--color--gray);
							transition: .3s;
						}
						.active .news__cat_item_icon {
							fill: #fff;
							transform: rotate(90deg);
						}

		.news__years_wrap {
			width: 100%;
			height: auto;
			margin-bottom: 50px;
		}
			.news__years_list {
				width: 100%;
				height: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 45px;
			}
				.news__years_item {
					width: auto;
					height: auto;
				}
					.news__years_item__link {
						font-size: 1rem;
						font-weight: 700;
						letter-spacing: 0.05em;
						color: var(--color--black);
						position: relative;
					}
						.news__years_item__link::after {
							content: '';
							display: block;
							width: 100%;
							height: 2px;
							background-color: var(--color--black);
							opacity: 0;
							position: absolute;
							bottom: -8px;
							left: 0;
						}
						.active .news__years_item__link::after {
							opacity: 1;
						}
		.news__list_wrap {
			width: 100%;
			max-width: 1000px;
			height: auto;
			margin: 0 auto;
		}
			.news__list {
				width: 100%;
				height: auto;
			}
				.news__item {
					width: 100%;
					height: auto;
					margin-bottom: 14px;
				}
				.news__item:last-of-type {
					margin-bottom: 0;
				}
					.news__item__link {
						width: 100%;
						height: auto;
						display: flex;
						justify-content: space-between;
						align-items: stretch;
					}
						.news__image {
							width: 27%;
							height: auto;
						}
							.news__image img {
								width: 100%;
								height: auto;
							}
						.news__contents {
							width: 73%;
							height: auto;
							padding: 25px 50px 25px 30px;
							background-color: var(--color--creamgray);
							position: relative;
						}
							.news__contents::before,
							.news__contents::after {
								content: '';
								display: block;
								width: 10px;
								height: 2.5px;
								border-radius: 1.15px;
								background-color: var(--color--black);
								position: absolute;
								bottom: 25px;
								transition: .3s;
							}
							.news__contents::before {
								right: 22px;
								transform: rotate(45deg) translate(0,-4px);
							}
							.news__contents::after {
								right: 22px;
								transform: rotate(-45deg) translate(0,4px);
							}
							.news__info {
								width: 100%;
								height: auto;
								display: flex;
								justify-content: flex-start;
								align-items: center;
							}
								.news__date {
									display: block;
									width: auto;
									height: 18px;
									padding: 0 0;
									margin-right: 20px;
									font-size: 0.875rem;
									font-weight: 500;
									line-height: 18px;
									letter-spacing: 0.08em;
									color: var(--color--gray);
								}
								.news__cat {
									display: flex;
									justify-content: center;
									align-items: center;
									width: 90px;
									height: 18px;
									padding: 0;
									margin: 0 4px 0 0;
									font-size: 0.75rem;
									font-weight: 700;
									line-height: 1;
									letter-spacing: 0em;
									color: #fff;
									text-align: center;
								}
								.news__cat.i-campaign,.news__cat.category01 {background-color: var(--color--skyblue);}
								.news__cat.i-iteminfo, .news__cat.category02 {background-color: var(--color--blue);}
								.news__cat.i-shop, .news__cat.category03 {background-color: var(--color--yellow);}
								.news__cat.i-csr, .news__cat.category04 {background-color: var(--color--gray);}
								.news__cat.i-info, .news__cat.category05 {background-color: var(--color--black);}
							.news__details {
								width: 100%;
								height: auto;
								margin: 11px auto 0;
							}
								.news__details_heading {
									width: 100%;
									height: auto;
									margin-bottom: 10px;
									font-size: 1.125rem;
									font-weight: 700;
									line-height: 1.6;
									letter-spacing: 0.04rem;
								}
								.news__details_txt {
									display: none;
								}

			#search-area {
				width: 100%;
				height: auto;
				padding: 65px 0;
			}
				.search-paging {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: center;
					align-items: center;
					column-gap: 10px;
				}
					.search-paging li {
						width: 30px;
						height: 30px;
						border-radius: 50%;
						overflow: hidden;
					}
						.arrow a {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
						}
							.arrow a svg {
								width: 6.5px;
								height: auto;
								fill: var(--color--black);
							}
					.prev {
						margin-right: 28px;
					}
					.next {
						margin-left: 28px;
					}
					.num {
						font-family: 'Satoshi', sans-serif;
						font-size: 0.875rem;
						font-weight: 500;
						line-height: 1;
						letter-spacing: 0em;
					}
						.num a {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							background-color: var(--color--dark_lightgray);
							color: var(--color--light_darkgray);
						}
						.num strong {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							background-color: var(--color--black);
							color: #fff;
						}
						.anchor-list-next-hidden {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
						}
}

/* SP ================================================== */
@media all and (max-width:599px){
#news {
	width: 100%;
	height: auto;
}
	.news__inner {
		width: 90%;
		height: auto;
		padding: 0 0 40px;
		margin: 0 auto;
	}
		.news__cat_wrap {
			width: 100%;
			height: auto;
			margin-bottom: 20px;
		}
			.news__cat_list {
				width: 100%;
				height: auto;
				padding: 0 0 20px;
				border-bottom: solid 1px var(--color--gray);
			}
				.news__cat_item {
					width: 100%;
					height: auto;
					margin-bottom: 8px;
				}
				.news__cat_item:last-of-type {
					margin-bottom: 0;
				}
					.news__cat_item__link {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 54px;
						background-color: var(--color--creamgray);
						font-size: 1.125rem;
						font-weight: 700;
						letter-spacing: 0.04em;
						color: var(--color--gray);
						position: relative;
						transition: .3s;
					}
					.active .news__cat_item__link {
						background-color: var(--color--darkgray);
						color: #fff;
						pointer-events: none;
					}
						.news__cat_item_icon {
							width: 6.5px;
							height: auto;
							margin-left: 15px;
							fill: var(--color--gray);
							transition: .3s;
						}
						.active .news__cat_item_icon {
							fill: #fff;
							transform: rotate(90deg);
						}

		.news__years_wrap {
			width: 100%;
			height: auto;
			overflow: scroll;
			margin-bottom: 20px;
		}
			.news__years_list {
				display: none;
			}
			.yearSelect {
				width: 100%;
				height: auto;
				position: relative;
			}
			.yearSelect::after {
				content: '';
				display: block;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 7px 5px 0 5px;
				border-color: var(--color--black) transparent transparent transparent;
				position: absolute;
				top: 23px;
				right: 20px;
			}
				.yearSelect form {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
					.yearSelect form label {
						margin-right: 10px;
						font-size: 1rem;
						font-weight: 700;
					}
					.yearSelect form select {
						flex: 1;
						height: 50px;
						padding: 0 20px;
						border-radius: 5px;
						border: solid 1px var(--color--gray);
						font-size: 1rem;
						font-weight: 500;
						color: var(--color--black);
					}
		.news__list_wrap {
			width: 100%;
			height: auto;
			margin: 0 auto;
		}
			.news__list {
				width: 100%;
				height: auto;
			}
				.news__item {
					width: 100%;
					height: auto;
					margin-bottom: 14px;
				}
				.news__item:last-of-type {
					margin-bottom: 0;
				}
					.news__item__link {
						width: 100%;
						height: auto;
					}
						.news__image {
							display: none;
						}
						.news__contents {
							width: 100%;
							height: auto;
							padding: 20px 35px 20px 15px;
							background-color: var(--color--creamgray);
							position: relative;
						}
							.news__contents::before,
							.news__contents::after {
								content: '';
								display: block;
								width: 9px;
								height: 2.5px;
								border-radius: 1.15px;
								background-color: var(--color--black);
								position: absolute;
								bottom: 31px;
								transition: .3s;
							}
							.news__contents::before {
								right: 19px;
								transform: rotate(45deg) translate(0,-4px);
							}
							.news__contents::after {
								right: 19px;
								transform: rotate(-45deg) translate(0,4px);
							}
							.news__info {
								width: 100%;
								height: auto;
								display: flex;
								justify-content: flex-start;
								align-items: center;
							}
								.news__date {
									display: block;
									width: auto;
									height: 16px;
									padding: 0 0;
									margin-right: 20px;
									font-size: 0.875rem;
									font-weight: 500;
									line-height: 18px;
									letter-spacing: 0.08em;
									color: var(--color--gray);
								}
								.news__cat {
									display: flex;
									justify-content: center;
									align-items: center;
									width: 80px;
									height: 16px;
									padding: 0;
									margin: 0 4px 0 0;
									font-size: 0.625rem;
									font-weight: 700;
									line-height: 1;
									letter-spacing: 0em;
									color: #fff;
									text-align: center;
								}
								.news__cat.i-campaign,.news__cat.category01 {background-color: var(--color--skyblue);}
								.news__cat.i-iteminfo, .news__cat.category02 {background-color: var(--color--blue);}
								.news__cat.i-shop, .news__cat.category03 {background-color: var(--color--yellow);}
								.news__cat.i-csr, .news__cat.category04 {background-color: var(--color--gray);}
								.news__cat.i-info, .news__cat.category05 {background-color: var(--color--black);}
							.news__details {
								width: 100%;
								height: auto;
								margin: 10px auto 0;
							}
								.news__details_heading {
									width: 100%;
									height: auto;
									font-size: 0.9375rem;
									font-weight: 700;
									line-height: 1.6;
									letter-spacing: 0.04rem;
								}
								.news__details_txt {
									display: none;
								}
							.news__item__icon {
								width: 8px;
								height: auto;
								fill: var(--color--black);
								position: absolute;
								bottom: 26px;
								right: 15px;
							}
			#search-area {
				width: 100%;
				height: auto;
				padding: 50px 0;
			}
				.search-paging {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: center;
					align-items: center;
					column-gap: 8px;
				}
					.search-paging li {
						width: 28px;
						height: 28px;
						border-radius: 50%;
						overflow: hidden;
					}
						.arrow a {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
						}
							.arrow a svg {
								width: 6.5px;
								height: auto;
								fill: var(--color--black);
							}
					.prev {
						margin-right: 20px;
					}
					.next {
						margin-left: 20px;
					}
					.num {
						font-family: 'Satoshi', sans-serif;
						font-size: 0.875rem;
						font-weight: 500;
						line-height: 1;
						letter-spacing: 0em;
					}
						.num a {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							background-color: var(--color--dark_lightgray);
							color: var(--color--light_darkgray);
						}
						.num strong {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							background-color: var(--color--black);
							color: #fff;
						}
						.anchor-list-next-hidden {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
						}
}