@charset "utf-8";

body {
	background-color: transparent;
}

#topics .sec_title,
#news .sec_title {
	margin-bottom: 0.6rem;
}
@media screen and (max-width: 800px) {
	#topics .sec_title,
	#news .sec_title {
		margin-bottom: 0.4rem;
	}
}

/*============================
MV / News 共通グラデーション背景
============================*/
#mv,
#news {
	background-image: linear-gradient(235deg, #A8d4b8 0%, #95c4dc 22%, #b8cff0 44%, #edd8b0 66%, #f0b0cc 88%, #e8d4b8 100%);
	background-size: 350% 350%;
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: 40% 50%;
	animation: mv_bg_gradient 5s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
	#mv,
	#news {
		animation: none;
	}
}

@keyframes mv_bg_gradient {
	0% {
		background-position: 30% 42%;
	}

	100% {
		background-position: 70% 58%;
	}
}

/* 年齢確認からの遷移オーバーレイ */
.age_transition_overlay {
	display: none;
}

html.is-age-transition .age_transition_overlay {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
	background-image: linear-gradient(235deg, #A8d4b8 0%, #95c4dc 22%, #b8cff0 44%, #edd8b0 66%, #f0b0cc 88%, #e8d4b8 100%);
	background-size: 350% 350%;
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: 40% 50%;
	animation: mv_bg_gradient 5s ease-in-out infinite alternate;
	opacity: 1;
	transition: opacity 1.2s ease;
}

html.is-age-transition.is-age-transition-fade .age_transition_overlay {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.is-age-transition .age_transition_overlay {
		animation: none;
		transition: none;
		opacity: 0;
	}
}

/*============================
MV
============================*/
#mv {
	position: relative;
	z-index: 2;
	padding: 0.8rem 0 0.4rem;
}
@media screen and (max-width: 800px) {
	#mv {
		padding: 0.1rem 0;
	}
}
@media screen and (max-width: 800px) {
	#mv {
		padding: 0.1rem 0;
	}
}

#mv .mv_slider {
	position: relative;
	margin-bottom: 0;
}
@media screen and (max-width: 800px) {
	#mv .mv_slider.slick-dotted.slick-slider {
		margin-bottom: 0.10rem;
	}
}

#mv .mv_slider .slick-list {
	overflow: visible;
	margin: 0 -0.1rem;
}
@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-list {
		margin: 0 -0.05rem;
	}
}
@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-list {
		margin: 0 -0.05rem;
	}
}

#mv .mv_slider .slick-slide {
	margin: 0 0.1rem;
	transition: opacity 0.4s ease;
}
@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-slide {
		margin: 0 0.05rem;
	}
}
@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-slide {
		margin: 0 0.05rem;
	}
}

#mv .mv_slider .slick-slide:not(.slick-center) {
	opacity: 0.6;
}

#mv .mv_slide a {
	display: block;
	border-radius: 0.08rem;
	overflow: hidden;
}

#mv .mv_slide img {
	display: block;
	width: 100%;
	height: auto;
}

#mv .mv_slider .slick-dots {
	position: static;
	margin-top: 0.2rem;
	line-height: 1;
}
@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-dots {
		margin-top: 0.1rem;
	}
}
@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-dots {
		margin-top: 0.1rem;
	}
}

#mv .mv_slider .slick-dots li {
	width: 0.08rem;
	height: 0.08rem;
	margin: 0 0.06rem;
	transition: width 0.3s ease;
}

@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-dots li {
		width: 0.05rem;
		height: 0.05rem;
		margin: 0 0.03rem;
	}
}
#mv .mv_slider .slick-dots li button {
	width: 0.08rem;
	height: 0.08rem;
	padding: 0;
}

#mv .mv_slider .slick-dots li button:before {
	content: '';
	width: 0.08rem;
	height: 0.08rem;
	border-radius: 0.04rem;
	background-color: #fff;
	opacity: 0.7;
	transition: width 0.3s;
}
@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-dots li button:before {
		width: 0.05rem;
		height: 0.05rem;
	}
}

#mv .mv_slider .slick-dots li.slick-active {
	width: 0.4rem;
}
@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-dots li.slick-active {
		width: 0.3rem;
	}
}

#mv .mv_slider .slick-dots li.slick-active button {
	width: 0.4rem;
}
@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-dots li.slick-active button {
		width: 0.3rem;
	}
}

#mv .mv_slider .slick-dots li.slick-active button:before {
	width: 0.4rem;
	border-radius: 0.04rem;
	background-color: #fff;
	opacity: 1;
}
@media screen and (max-width: 800px) {
	#mv .mv_slider .slick-dots li.slick-active button:before {
		width: 0.3rem;
	}
}

/*============================
Topics Bar
============================*/
#topics_bar {
	background-color: #2a2a2a;
	color: #fff;
	position: relative;
	z-index: 2;
}

#topics_bar .topics_bar_inner {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.14rem 0;
}
@media screen and (max-width: 800px) {
	#topics_bar .topics_bar_inner {
		gap: 0.15rem;
		padding: 0.12rem 0;
	}
}

#topics_bar .topics_bar_label {
	flex-shrink: 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
}
@media screen and (max-width: 800px) {
	#topics_bar .topics_bar_label {
		font-size: 0.12rem;
	}
}

#topics_bar .topics_bar_slider {
	flex: 1;
	min-width: 0;
}

#topics_bar .topics_bar_slide a {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	color: #fff;
	font-size: 0.15rem;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.05em;
}
@media screen and (max-width: 800px) {
	#topics_bar .topics_bar_slide a {
		font-size: 0.1rem;
		gap: 0.1rem;
	}
}

#topics_bar .topics_bar_slide a:hover {
	opacity: 0.7;
}

#topics_bar .topics_bar_slide time {
	flex-shrink: 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.14rem;
	letter-spacing: 0.02em;
	position: relative;
}
@media screen and (max-width: 800px) {
	#topics_bar .topics_bar_slide time {
		font-size: 0.1rem;
	}
}

#topics_bar .topics_bar_slide time::after {
	content: '';
	display: block;
	width: 0.06rem;
	height: 0.01rem;
	background-color: #fff;
	position: absolute;
	right: -0.13rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

#topics_bar .topics_bar_text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#topics_bar .topics_bar_nav {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.16rem;
}
@media screen and (max-width: 800px) {
	#topics_bar .topics_bar_nav {
		gap: 0.1rem;
	}
}

#topics_bar .topics_bar_prev,
#topics_bar .topics_bar_next {
	display: block;
	width: 0.12rem;
	height: 0.12rem;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	cursor: pointer;
	transition: opacity 0.3s ease;
}
@media screen and (max-width: 800px) {
	#topics_bar .topics_bar_prev,
	#topics_bar .topics_bar_next {
		width: 0.1rem;
		height: 0.1rem;
	}
}

#topics_bar .topics_bar_prev {
	background-image: url(../common/img/icon_arrow_white_rev.svg);
}

#topics_bar .topics_bar_next {
	background-image: url(../common/img/icon_arrow_white.svg);
}

#topics_bar .topics_bar_prev:hover,
#topics_bar .topics_bar_next:hover {
	opacity: 0.6;
}

#topics_bar .topics_bar_prev.slick-disabled,
#topics_bar .topics_bar_next.slick-disabled {
	opacity: 0.3;
	cursor: default;
}

/*============================
About
============================*/
body.page-top {
	--about-overlap: 100vh;
	--about-sticky-offset: 0.8rem;
}

@media screen and (max-width: 800px) {
	body.page-top {
		--about-sticky-offset: 0.5rem;
	}
}

@media screen and (orientation: portrait) and (min-width: 601px) and (max-width: 800px) {
	body.page-top {
		--about-overlap: 50vh;
	}
}

/* タブレット: aboutの表示高さを抑える */
@media screen and (min-width: 801px) and (max-width: 1024px) {
	body.page-top {
		--about-overlap: 25vh;
		--about-sticky-height: 55vh;
	}

	#about .about_sticky {
		align-items: flex-start;
		padding-top: 0.4rem;
		box-sizing: border-box;
	}
}

#about {
	position: relative;
	z-index: 1;
	background-color: #fff;
}

#about .about_sticky {
	position: relative;
}

@media screen and (min-width: 801px) {
	#about {
		height: calc((var(--about-sticky-height, 100vh) - var(--about-sticky-offset)) + var(--about-overlap));
	}
	#about .about_sticky {
		position: sticky;
		top: var(--about-sticky-offset);
		/* height: calc(var(--about-sticky-height, 100vh) - var(--about-sticky-offset)); */
		height: 70vh;
		display: flex;
		align-items: center;
	}
}

@media screen and (min-width: 801px) and (prefers-reduced-motion: reduce) {
	#about {
		height: auto;
	}

	#about .about_sticky {
		position: relative;
		height: auto;
		display: block;
		overflow: visible;
	}

	#service {
		margin-top: 0;
		transform: none;
	}
}

@media screen and (max-width: 800px) {
	#about {
		height: calc((120vh - var(--about-sticky-offset)) + var(--about-overlap));
		padding: 0;
	}

	#about .about_sticky {
		position: sticky;
		top: var(--about-sticky-offset);
		height: calc(100vh - var(--about-sticky-offset));
		display: flex;
		align-items: flex-start;
		padding: 0.4rem 0 0.6rem;
		box-sizing: border-box;
	}

	#service {
		margin-top: calc(-1 * var(--about-overlap));
		transform: translateZ(0);
	}
}

@media screen and (max-width: 800px) and (prefers-reduced-motion: reduce) {
	#about {
		height: auto;
		padding: 0.4rem 0 0.6rem;
	}

	#about .about_sticky {
		position: relative;
		height: auto;
		display: block;
		padding: 0;
	}

	#service {
		margin-top: 0;
		transform: none;
	}
}

#about .about_inner {
	display: flex;
	align-items: center;
	min-height: 7.2rem;
	padding-bottom: 1.5rem;
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
	#about .about_inner {
		min-height: 3.8rem;
		padding-bottom: 0.4rem;
	}
}
@media screen and (max-width: 800px) {
	#about .about_inner {
		flex-direction: column;
		align-items: flex-start;
		min-height: auto;
	}
}

#about .about_body {
	position: relative;
	z-index: 1;
	flex: 0 0 48%;
	padding-right: 0.4rem;
}
@media screen and (max-width: 1024px) {
	#about .about_body {
		padding-left: 0.40rem;
	}
	#about .about_body .about_lead br {
		display: none;
	}
}
@media (orientation: portrait){
	#about .about_body {
		flex: 0 0 58%;
	}
}
@media screen and (max-width: 800px) {
	#about .about_body {
		flex: none;
		width: 100%;
		padding-right: 0;
		margin-bottom: 0.5rem;
	}
	#about .about_body {
		padding-left: 0;
	}
	#about .about_body .about_lead br {
		display: block;
	}
}

#about .about_lead {
	font-size: 0.36rem;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.08em;
	margin-bottom: 0.4rem;
}
@media (orientation: portrait){
	#about .about_lead {
		font-size: 0.36rem;
	}
	#about .about_lead br {
		display: none;
	}
}
@media screen and (max-width: 800px) {
	#about .about_lead {
		font-size: 0.20rem;
		margin-bottom: 0.25rem;
	}
}

#about .about_text {
	font-size: 0.16rem;
	line-height: 2;
	letter-spacing: 0.05em;
}
@media (orientation: portrait){
	#about .about_text {
		font-size: 0.20rem;
	}
}
@media screen and (max-width: 800px) {
	#about .about_text {
		font-size: 0.14rem;
		line-height: 2;
	}
}

#about .about_gallery {
	position: absolute;
	top: 50%;
	right: -2.2rem;
	width: 65%;
	height: 130vh;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
}
@media (orientation: portrait){
	#about .about_gallery {
		top: 50vh;
		right: -1.0rem;
	}
}
@media screen and (max-width: 800px) {
	#about .about_gallery {
		position: relative;
		top: auto;
		right: auto;
		width: calc(100% + 0.4rem);
		height: 6rem;
		transform: none;
		margin-left: -0.2rem;
		margin-right: -0.2rem;
		overflow: hidden;
	}
}

#about .about_gallery_cols {
	display: flex;
	justify-content: center;
	gap: 0.18rem;
	height: 150%;
	transform: rotate(24deg);
}
@media (orientation: portrait){
	#about .about_gallery_cols {
		transform: rotate(10deg);
	}
}
@media screen and (max-width: 800px) {
	#about .about_gallery_cols {
		height: 100%;
		gap: 0.12rem;
		transform: none;
	}
}

#about .about_gallery_col {
	flex: 0 0 12vw;
	min-height: 0;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
@media screen and (max-width: 800px) {
	#about .about_gallery_col {
		flex: 0 0 2.4rem;
		height: 100%;
		min-height: 0;
	}
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
	#about .about_gallery_col {
		flex: 0 0 3.0rem;
	}
}


@media screen and (max-width: 500px) {
	#about .about_gallery_col {
		flex: 0 0 1.4rem;
	}
}


#about .about_gallery_wrap {
	display: flex;
	flex-direction: column;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#about .about_gallery_col.is_up .about_gallery_wrap {
	animation: about_scroll_up 36s linear infinite;
}

#about .about_gallery_col.is_down .about_gallery_wrap {
	animation: about_scroll_down 40s linear infinite;
}

/* スマホは sticky 内の CSS animation が止まることがあるため JS 駆動に切替 */
html.is-about-js-marquee #about .about_gallery_col.is_up .about_gallery_wrap,
html.is-about-js-marquee #about .about_gallery_col.is_down .about_gallery_wrap {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	#about .about_gallery_col.is_up .about_gallery_wrap,
	#about .about_gallery_col.is_down .about_gallery_wrap {
		animation: none;
	}
}

#about .about_gallery_track {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
	margin-bottom: 0.18rem;
}
@media screen and (max-width: 800px) {
	#about .about_gallery_track {
		gap: 0.12rem;
		margin-bottom: 0.12rem;
	}
}

#about .about_gallery_track li {
	overflow: hidden;
	border-radius: 0.16rem;
}
@media screen and (max-width: 800px) {
	#about .about_gallery_track li {
		border-radius: 0.12rem;
	}
}

#about .about_gallery_track img {
	display: block;
	width: 100%;
	height: auto;
}

@keyframes about_scroll_up {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(0, -50%, 0);
	}
}

@keyframes about_scroll_down {
	0% {
		transform: translate3d(0, -50%, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/*============================
Service
============================*/
#service {
	position: relative;
	z-index: 2;
	overflow: hidden;
	padding: 1rem 0 1.2rem;
	isolation: isolate;
}

@media screen and (min-width: 801px) {
	#service {
		margin-top: calc(-1 * var(--about-overlap));
		transform: translateZ(0);
	}
}

@media screen and (max-width: 800px) {
	#service {
		padding: 0.5rem 0 0.8rem;
	}
}



#service .service_shiori {
	position: absolute;
	top: -0.05rem;
	left: 1rem;
	z-index: 3;
	line-height: 0;
}
@media screen and (max-width: 800px) {
	#service .service_shiori {
		left: 0.4rem;
	}
}

#service .service_shiori img {
	display: block;
	width: 0.26rem;
	height: auto;
}
@media screen and (max-width: 800px) {
	#service .service_shiori img {
		width: 0.2rem;
	}
}

#service .service_bg {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(100% - 0.6rem);
	height: 100%;
	z-index: 0;
	background-color: rgba(247, 247, 247, 0.72);
	border-radius: 0.4rem 0 0 0.4rem;
	pointer-events: none;
	overflow: hidden;
	-webkit-backdrop-filter: blur(0.2rem);
	backdrop-filter: blur(0.2rem);
	z-index: 2;
}
@media screen and (max-width: 800px) {
	#service .service_bg {
		width: 100%;
		border-radius: 0;
	}

	#service .service_bg img {
		filter: none;
		transform: none;
	}
}
@media screen and (max-width: 800px) {
	#service .service_bg img {
		right: -1.2rem;
		bottom: -0.6rem;
		width: 5rem;
		opacity: 0.6;
	}
}

/* タブレット縦 */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) and (min-aspect-ratio: 3/5) {
	#service .service_bg {
		width: calc(100% - 0.2rem);
	}
}
#service .in {
	position: relative;
	z-index: 3;
}

#service .logo {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 3;
}

#service .logo.logo_draw img {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 2.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#service .logo.logo_draw.scrollin img {
	clip-path: inset(0 0 0 0);
}

#service .logo img {
	display: block;
	width: 100%;
	height: auto;
}
@media screen and (max-width: 800px) {
	#service .logo {
		width: 90vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	#service .logo.logo_draw img {
		clip-path: inset(0 0 0 0);
		transition: none;
	}
}

#service .service_head {
	text-align: center;
	margin-bottom: 0.6rem;
}
@media screen and (max-width: 800px) {
	#service .service_head {
		margin-bottom: 0.4rem;
	}

	#service .sec_title {
		margin-bottom: 0.2rem;
	}
}

#service .service_lead {
	font-size: 0.16rem;
	line-height: 2;
	letter-spacing: 0.05em;
}
@media screen and (max-width: 800px) {
	#service .service_lead {
		text-align: left;
		padding-left: 0.2rem;
		font-size: 0.14rem;
	}
}

#service .service_list {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}
@media screen and (max-width: 800px) {
	#service .service_list {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}
}

#service .service_item {
	flex: 0 0 3.2rem;
}
@media screen and (max-width: 800px) {
	#service .service_item {
		flex: none;
		width: 100%;
		max-width: 3rem;
	}
}

/* タブレット縦: 3カラムがはみ出さないように幅を収める */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) and (min-aspect-ratio: 3/5) {
	#service .service_list {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: center;
		gap: 0.2rem;
		width: 100%;
		box-sizing: border-box;
	}
	#service .service_item {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: none;
	}
}


#service .service_card {
	text-align: center;
}

#service .service_card_visual {
	position: relative;
	margin-bottom: 0.24rem;
}

#service .service_card_img {
	border-radius: 0.2rem;
	overflow: hidden;
	transition: transform 0.5s ease, box-shadow 0.5s ease;
	box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.3);
	width: 90%;
	margin: auto;
}
@media screen and (max-width: 800px) {
	#service .service_card_img {
		width: 100%;
	}
}

#service .service_card_img img {
	display: block;
	width: 100%;
	height: auto;
}

#service .service_card_en {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.28rem;
	z-index: 1;
	font-family: 'Inter', sans-serif;
	font-size: 0.52rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 0.02rem 0.12rem rgba(0, 0, 0, 0.25);
	pointer-events: none;
	mix-blend-mode: difference;
}
@media screen and (max-width: 800px) {
	#service .service_card_en {
		font-size: 0.4rem;
		bottom: -0.2rem;
	}
}

#service .service_item.is_left .service_card_img {
	transform: rotate(-3deg);
}

#service .service_item.is_right .service_card_img {
	transform: rotate(-7deg);
}

#service .service_item.is_center .service_card_img {
	transform: rotate(4deg);
	box-shadow:
		/* 0 0 0 0.02rem rgba(120, 190, 255, 0.55), */
		0 0.16rem 0.4rem rgba(120, 190, 255, 0.35);
}
@media screen and (max-width: 800px) {
	#service .service_item.is_left .service_card_img,
	#service .service_item.is_right .service_card_img,
	#service .service_item.is_center .service_card_img {
		transform: rotate(0deg);
	}
}
@media (hover: hover) {
	#service .service_card:has(.btn_common:hover) .service_card_img {
		transform: rotate(0deg);
	}
}

#service .service_card_title {
	font-size: 0.16rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	margin-bottom: 0.16rem;
}
@media screen and (max-width: 800px) {
	#service .service_card_title {
		font-size: 0.16rem;
	}
}

#service .service_card_text {
	font-size: 0.15rem;
	line-height: 2;
	text-align: left;
	letter-spacing: 0.05em;
	margin-bottom: 0.24rem;
}
@media screen and (max-width: 800px) {
	#service .service_card_text {
		font-size: 0.14rem;
	}
}

/*============================
Topics
============================*/
#topics {
	padding: 1rem 0 1.2rem;
	background-color: #fff;
	z-index: 3;
}
@media screen and (max-width: 800px) {
	#topics {
		padding: 0.7rem 0 0.8rem;
	}
}

#topics .topics_body {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}
@media screen and (max-width: 800px) {
	#topics .topics_body {
		flex-direction: column;
		gap: 0.4rem;
	}
}

#topics .topics_pickup {
	flex: 0 0 50%;
}
@media screen and (max-width: 800px) {
	#topics .topics_pickup {
		flex: none;
		width: 100%;
	}
}

#topics .topics_pickup_link {
	display: block;
	color: #1a1a1a;
	transition: opacity 0.3s ease;
}
@media (hover: hover) {
	#topics .topics_pickup_link:hover {
		opacity: 0.7;
	}
	#topics .topics_pickup_link:hover .topics_pickup_img img {
		transform: scale(1.05);
	}
}

#topics .topics_pickup_img {
	display: block;
	margin-bottom: 0.2rem;
	border-radius: 0.12rem;
	overflow: hidden;
}

#topics .topics_pickup_img img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}

#topics .topics_date {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 0.14rem;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #888;
	margin-bottom: 0.12rem;
}
@media screen and (max-width: 800px) {
	#topics .topics_date {
		font-size: 0.12rem;
	}
}

#topics .topics_pickup_title {
	font-size: 0.2rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05em;
	margin-bottom: 0.12rem;
	transition: color 0.3s ease;
}

@media (hover: hover) {
	#topics a:hover .topics_pickup_title {
		color: #fe0000;
	}
	@media screen and (max-width: 800px) {
		#topics .topics_pickup_title {
			font-size: 0.14rem;
			margin-bottom: 0.05rem;
		}
	}
}

#topics .topics_pickup_text {
	font-size: 0.15rem;
	line-height: 2;
	letter-spacing: 0.05em;
	margin-bottom: 0.16rem;
}
@media screen and (max-width: 800px) {
	#topics .topics_pickup_text {
		font-size: 0.13rem;
	}
}

#topics .topics_pickup_foot {
	text-align: right;
}

#topics .topics_list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.36rem;
}
@media screen and (max-width: 800px) {
	#topics .topics_list {
		gap: 0.3rem;
	}
}

#topics .topics_item_link {
	display: flex;
	gap: 0.2rem;
	align-items: flex-start;
	color: #1a1a1a;
	transition: opacity 0.3s ease;
}
@media (hover: hover) {
	#topics .topics_item_link:hover {
		opacity: 0.7;
		color: #fe0000;
	}

	#topics .topics_item_link:hover .topics_item_img img {
		transform: scale(1.08);
	}
}

#topics .topics_item_img {
	flex: 0 0 2.6rem;
	border-radius: 0.1rem;
	overflow: hidden;
	height: 1.65rem;
}
@media screen and (max-width: 800px) {
	#topics .topics_item_img {
		flex: 0 0 40%;
		height: 24vw;
		overflow: hidden;
	}
}

#topics .topics_item_img img {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.4s ease;
	object-fit: cover;
}

#topics .topics_item_body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

#topics .topics_item_title {
	font-size: 0.16rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05em;
	margin-bottom: 0.12rem;
	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
	transition: color 0.3s ease;
}
@media screen and (max-width: 800px) {
	#topics .topics_item_title {
		font-size: 0.13rem;
		-webkit-line-clamp: 2;
	}
}

#topics .topics_item_foot {
	margin-top: auto;
	text-align: right;
}

#topics .topics_foot {
	text-align: center;
	margin-top: 0.6rem;
}
@media screen and (max-width: 800px) {
	#topics .topics_foot {
		margin-top: 0.4rem;
	}
}

#topics .coming_soon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4rem;
	text-align: center;
}
#topics .coming_soon_en {
	margin: 0;
	font-family: "Outfit", "Inter", sans-serif;
	font-size: 0.42rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #1a1a1a;
	line-height: 1.3;
}
@media screen and (max-width: 800px) {
	#topics .coming_soon {
		min-height: 1.8rem;
	}
	#topics .coming_soon_en {
		font-size: 0.28rem;
	}
}

/*============================
News
============================*/
#news {
	position: relative;
	z-index: 1;
	padding: 0.8rem 0 1rem;
}
@media screen and (max-width: 800px) {
	#news {
		padding: 0.7rem 0 0.8rem;
	}
}

#news .in {
	position: relative;
}

#news .news_list {
	max-width: 8rem;
	margin: 0 auto;
}
@media screen and (max-width: 800px) {
	#news .news_list {
		max-width: 100%;
	}
}

#news .news_item {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.14rem 0;
	color: #1a1a1a;
	transition: all 0.3s ease;
}

#news .news_item:hover {
	color: #fe0000;
}

#news .news_item:hover .news_date {
	color: #fe0000;
}

@media (hover: hover) {
	#news .news_item:hover {
		opacity: 0.7;
	}
}
@media screen and (max-width: 800px) {
	#news .news_item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.08rem;
		padding: 0.12rem 0;
	}
}

#news .news_date {
	flex: 0 0 1rem;
	font-family: 'Outfit', sans-serif;
	font-size: 0.16rem;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: #888;
	transition: all 0.3s ease;
}
@media screen and (max-width: 800px) {
	#news .news_date {
		flex: none;
		font-size: 0.14rem;
		line-height: 1;
	}
}

#news .news_text {
	min-width: 0;
	font-size: 0.16rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: relative;
}

#news .news_text::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.4s ease;
}

@media (hover: hover) {
	#news .news_item:hover .news_text::after {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

@media (prefers-reduced-motion: reduce) {
	#news .news_text::after {
		transition: none;
	}

	@media (hover: hover) {
		#news .news_item:hover .news_text::after {
			transform: scaleX(1);
		}
	}
}
@media screen and (max-width: 800px) {
	#news .news_text {
		flex: none;
		font-size: 0.14rem;
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
	}
}

#news .news_foot {
	text-align: center;
	margin-top: 0.5rem;
}
@media screen and (max-width: 800px) {
	#news .news_foot {
		margin-top: 0.4rem;
	}
}