:root {
	--black: #222;
	--white: #fff;
	--red: #ff0211;
	--blue: #4dc9ff;
	--gray: #cfd1d6;
	--light-gray: #f5f5f5;
	--dark-gray: #707684;
}

.ame-front {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background-color: var(--white);
	color: var(--black);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.ame-front *,
.ame-front *::before,
.ame-front *::after { box-sizing: border-box; }
.ame-front a { color: inherit; text-decoration: none; }
.top-page-shell { width: min(1108px, calc(100% - 40px)); margin-right: auto; margin-left: auto; }

.feature-section {
	--ame-feature-background: none;
	position: relative;
	padding: 36px 0 0;
	margin: 0 auto 60px;
	overflow: visible;
	background: transparent;
}

.feature-section::before {
	position: absolute;
	top: 44%;
	right: -8%;
	bottom: 0;
	left: -8%;
	z-index: 1;
	content: "";
	background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .34)), var(--ame-feature-background);
	background-position: center;
	background-size: cover;
	filter: blur(34px);
	opacity: .48;
	pointer-events: none;
	transform: scale(1.1);
	transition: background-image .6s ease;
}

.section-heading { margin: 0 0 32px; }
.section-heading h1,
.section-heading h2 { margin: 0; color: var(--black); font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; line-height: 1.35; }

.feature-slider {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-bottom: 70px;
	outline: none;
	touch-action: pan-y;
	user-select: none;
	isolation: isolate;
}
.feature-slider__viewport { position: relative; z-index: 1; width: 100%; height: min(616px, calc(36vw + 166px)); overflow: hidden; cursor: grab; }
.feature-slider.is-dragging .feature-slider__viewport { cursor: grabbing; }
.feature-slider__track { position: relative; width: 100%; height: 100%; }
.feature-slide {
	--ame-feature-card-width: min(800px, 64vw);
	--ame-feature-slide-slot: min(810px, 65vw);
	--ame-feature-slide-double-slot: min(1620px, 130vw);
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--ame-feature-card-width);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) scale(.9);
	transition: left 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1), opacity .6s ease;
	will-change: left, transform;
}
.feature-slide[data-position="0"] { left: 50%; z-index: 3; opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }
.feature-slide[data-position="-1"] { left: calc(50% - var(--ame-feature-slide-slot)); z-index: 2; opacity: 1; pointer-events: auto; }
.feature-slide[data-position="1"] { left: calc(50% + var(--ame-feature-slide-slot)); z-index: 2; opacity: 1; pointer-events: auto; }
.feature-slide[data-position="-2"] { left: calc(50% - var(--ame-feature-slide-double-slot)); z-index: 1; }
.feature-slide[data-position="2"] { left: calc(50% + var(--ame-feature-slide-double-slot)); z-index: 1; }
.feature-card__surface { display: block; overflow: hidden; background-color: var(--white); box-shadow: 0 22px 54px rgba(24, 27, 35, .16); }
.feature-image { display: block; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background-color: var(--light-gray); }
.feature-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.feature-card__content { min-height: 166px; padding: 30px; background-color: var(--white); }
.feature-title {
	margin: 0;
	color: var(--black);
	font-size: clamp(20px, 2vw, 25px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .1em;
}
.feature-title a {
	display: inline;
	background: linear-gradient(90deg, #000 100%, #000 0);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size .5s ease;
}
.feature-date { display: block; margin-top: 10px; color: var(--black); font-family: "Roboto Condensed", "Noto Sans JP", sans-serif; font-size: 13px; line-height: 1; }
.feature-slide:hover .feature-title a,
.feature-slide:focus-within .feature-title a { background-size: 100% 1px; }
.feature-slide:hover .feature-image img,
.feature-slide:focus-within .feature-image img { transform: scale(1.035); }
.feature-slider__dots { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 15px; height: 16px; margin-top: 30px; }
.feature-slider__dots button { width: 50px; height: 3px; padding: 0; border: 0; border-radius: 6px; background-color: rgba(255, 255, 255, .55); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); cursor: pointer; transition: background-color .3s ease, transform .3s ease; }
.feature-slider__dots button.is-active { background-color: var(--white); transform: scaleY(1.5); }

@media (min-width: 1000px) {
	body.home .l-header {
		z-index: 100;
		background: rgba(246, 246, 247, .54);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		transition: background-color .28s ease, -webkit-backdrop-filter .28s ease, backdrop-filter .28s ease;
	}

	body.home:not(.ame-page-scrolled) .l-content {
		z-index: auto;
	}

	body.home:not(.ame-page-scrolled) .feature-slider {
		z-index: 200;
	}

	body.home.ame-page-scrolled .l-content {
		z-index: 0;
	}

	body.home.ame-page-scrolled .l-header {
		background: rgba(246, 246, 247, .92);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	body.home .feature-section {
		margin-top: -24px;
		padding-top: 0;
	}

	body.home .feature-section::before {
		top: calc(0px - var(--ark-header_height, 120px) - 44px);
		right: -10%;
		left: -10%;
		filter: blur(38px);
		opacity: .5;
		transform: scale(1.08);
	}
}

.main-section { padding: 80px 20px 120px; background-color: var(--light-gray); }
.main-section .top-page-shell { width: min(1108px, 100%); }
.main-two-columns { display: flex; justify-content: space-between; column-gap: 20px; align-items: flex-start; }
.main-content { flex: 0 1 786px; min-width: 0; }
.sidebar { display: flex; flex: 0 1 302px; flex-direction: column; min-width: 0; row-gap: 48px; }

.article-list { display: flex; flex-wrap: wrap; gap: 32px; }
.article-card { display: flex; flex-direction: column; justify-content: space-between; width: calc(50% - 16px); overflow: hidden; background-color: var(--white); border-radius: 12px; }
.article-card__image { display: block; overflow: hidden; aspect-ratio: 3 / 2; background-color: var(--gray); }
.article-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.article-card:hover .article-card__image img,
.article-card:focus-within .article-card__image img { transform: scale(1.035); }
.article-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 20px; }
.article-card__date { margin-bottom: 8px; color: var(--dark-gray); font-size: 12px; line-height: 1.5; }
.article-card__title { margin: 0 0 16px; color: var(--black); font-size: 16px; font-weight: 700; line-height: 1.6; }
.article-card__title a { background: linear-gradient(90deg, #000 100%, #000 0); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .4s ease; }
.article-card:hover .article-card__title a,
.article-card:focus-within .article-card__title a { background-size: 100% 1px; }

.ame-card__terms { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: auto 0 0; padding: 0; list-style: none; }
.ame-card__terms a {
	display: inline-block;
	padding: 6px 8px;
	border: 1px solid var(--dark-gray);
	border-radius: 4px;
	color: var(--dark-gray);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;
}
.ame-card__terms a:hover,
.ame-card__terms a:focus { border-color: var(--black); background-color: var(--black); color: var(--white); }
.ame-card__terms a::before { content: none; }

.category-panel { overflow: hidden; border-radius: 12px; background-color: var(--white); }
.category-panel__title { margin: 0; padding: 22px 24px; border-bottom: 1px solid var(--gray); color: var(--black); font-size: 20px; font-weight: 700; line-height: 1.5; }
.category-list { margin: 0; padding: 0 24px; list-style: none; }
.category-list__item + .category-list__item { border-top: 1px solid var(--gray); }
.category-list__item a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; font-size: 14px; font-weight: 500; }
.category-list__item a:hover span:first-child,
.category-list__item a:focus span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.category-list__count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; background-color: var(--light-gray); color: var(--dark-gray); font-size: 11px; }

.article-list__action { margin-top: 48px; text-align: center; }
.ame-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 250px; padding: 15px 22px; border: 1px solid var(--black); border-radius: 999px; color: var(--black); font-weight: 700; transition: color .25s ease, background-color .25s ease; }
.ame-button:hover, .ame-button:focus { background-color: var(--black); color: var(--white); }
.ame-empty { padding: 28px; border: 1px dashed var(--gray); border-radius: 12px; background-color: var(--white); }
.front-existing-sections { padding: 80px 0; }

@media (max-width: 800px) {
	.feature-section { padding-top: 24px; }
	.feature-slider { padding-bottom: 32px; }
	.feature-section::before { filter: blur(24px); opacity: .28; }
	.feature-slider__viewport { height: calc(56.25vw + 124px); }
	.feature-slide {
		--ame-feature-card-width: calc(100vw - 28px);
		--ame-feature-slide-slot: 100vw;
	}
	.feature-slide[data-position="-1"],
	.feature-slide[data-position="1"] { opacity: 0; pointer-events: none; }
	.feature-card__content { min-height: 140px; padding: 15px; }
	.feature-title { font-size: 18px; line-height: 1.6; letter-spacing: .1em; }
	.feature-date { margin-top: 8px; font-size: 12px; }
	.feature-slider__dots { height: 15px; margin-top: 10px; }
	.feature-slider__dots button { width: 38px; background-color: rgba(34, 34, 34, .25); box-shadow: none; }
	.feature-slider__dots button.is-active { background-color: var(--black); }
	.main-section { padding: 64px 20px 80px; }
	.main-two-columns { flex-direction: column; row-gap: 64px; }
	.main-content, .sidebar { flex-basis: auto; width: 100%; }
	.article-card { width: 100%; }
}

@media (max-width: 480px) {
	.top-page-shell { width: min(100% - 28px, 1108px); }
	.feature-section { margin-bottom: 48px; }
	.section-heading { margin-bottom: 24px; }
	.main-section { padding: 52px 14px 64px; }
	.article-list { gap: 24px; }
	.article-card__body { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.ame-front *, .ame-front *::before, .ame-front *::after { scroll-behavior: auto !important; transition: none !important; }
}