@charset "UTF-8";
/*
Theme Name: チューリング株式会社_チューリポ
Version: 1.0.0
*/

html {
	scroll-behavior: smooth;
}

::after,
::before,
:where(b, strong, span, i, em) {
	--font-size: calc((var(--fs) / 16) * 1rem);
	font-size: inherit;
}

body {
	color: var(--color-body-1);
	font-family: var(--gothic);
	font-weight: var(--fw);
}

body.noscroll {
	touch-action: pinch-zoom;
	overflow: hidden;
}

a {
	color: #333;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

[id] {
	scroll-margin-top: 90px;
}

@media(max-width: 540px) {
	[id] {
		scroll-margin-top: 70px;
	}
}

/* :where(a, button) {
	transition: opacity var(--ts);
	&:hover {
		opacity: var(--op);
	}
} */


a:where(:not([href]), [href=""]) {
	pointer-events: none;
}

main {
	padding: 90px 0px 0px 0px;
	overflow: clip;
}

.container {
	padding-inline: var(--padding);
	max-width: calc(var(--padding) * 2 + var(--container));
}

.stack {
	padding-top: var(--stack);
	padding-bottom: var(--stack);
}

@media(max-width: 540px) {
	main {
		padding: 70px 0 0;
	}
}

.site-header {
	display: flex;
	align-items: center;
    background: #000000;
    flex: none;
    flex-direction: row;
    gap: 40px;
    height: 90px;
    justify-content: space-between;
    left: 0;
    margin: 0 0 0 0;
    padding: 0px 0px 0px 40px;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100%;
	z-index: 500;
}

.site-header a {
	color: #fff;
}

.header-logo img {
	display: block;
	max-height: 34px;
	width: auto;
}

.header-actions {
	position: relative;
	display: flex;
    align-content: center;
    align-items: center;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 56px;
    height: 100%;
    justify-content: flex-end;
    margin: 0px;
    padding: 0px;
    width: auto;
    max-width: 100%;
}

.header-nav {
	display: flex;
	align-items: center;
	align-content: center;
	flex: none;
	flex-direction: row;
    flex-wrap: nowrap;
    gap: 40px;
    height: auto;
	justify-content: flex-start;
    padding: 0px;
    width: auto;
	max-width: 100%;
}

.header-nav-item {
	color: #FFFFFF;
    flex: none;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    height: auto;
    letter-spacing: 0em;
    text-align: left;
    width: auto;
    max-width: 100%;
	justify-content: flex-start;
}

.header-nav-item.link-active {
	font-size: 15px;
}

.header-search-button {
    display: none;
	background: transparent;
	border: none;
	outline: none;
	padding: 0;
}

.header-menu-button {
	position: relative;
	display: flex;
    align-content: center;
    align-items: center;
    background: #1F1F1F;
    gap: 10px;
    height: 100%;
    justify-content: flex-start;
    padding: 0px 32px 0px 32px;
    width: 90px;
    max-width: 100%;
	border: 0;
	transition: .3s cubic-bezier(.4,.4,0,1);
	&::before,
	&::after {
		content: "";
		height: 34px;
		width: 3px;
		background: #FFF;
		position: absolute;
		top: 50%;
		left: 50%;
		opacity: 0;
		visibility: hidden;
		transition: .3s cubic-bezier(.4,.4,0,1);
	}
	&::before {
		transform: translate(-50%,-50%) rotate(45deg);
	}
	&::after {
		transform: translate(-50%,-50%) rotate(135deg);
	}
}

body.noscroll {
	.header-menu-button {
		img {
			opacity: 0;
			visibility: hidden;
		}
		&::before,
		&::after {
			opacity: 1;
			visibility: visible;	
		}
	}
}

.header-menu-button img {
	max-width: 28px;
	height: auto;
}

.global-nav {
	background: #1f1f1f;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	padding-top: 90px;
	opacity: 0;
	overflow: scroll;
	visibility: hidden;
	transition: .3s cubic-bezier(.4,.4,0,1);
}

body.noscroll {
	.global-nav {
		z-index: 50;
		opacity: 1;
		visibility: visible;
	}
}

.global-nav-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 170px;
	padding-block: 56px;
}

.global-nav-list {
	display: none;
	gap: 24px;
	width: 100%;
	list-style: none;
	border-bottom: 1px solid #3A3A3A;
	padding: 0 20px 64px;
	margin-bottom: 0;
	li a {
		display: block;
		font-size: 16px;
		font-weight: 600;
		line-height: 1;
		color: #FFF;
	}
}

.global-nav-info {
	.manage {
		display: grid;
		gap: 32px;
		font-size: 16px;
		font-weight: 400;
		line-height: 1;
		color: #FFF;
		margin-bottom: 72px;
	}
	.official-sns {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 0;
		margin-bottom: 56px;
		p {
			font-size: 16px;
			font-weight: 400;
			font-family: var(--en);
			line-height: 1;
			color: #FFF;
			max-width: 100%;
			width: 100%;
			margin-bottom: 0;
		}
		.official-sns-list {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			gap: 24px;
			max-width: 100%;
			width: 100%;
			list-style: none;
			padding: 0;
			margin: 0;
		}
	}
	.board-sns {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		p {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 16px;
			font-weight: 400;
			font-family: var(--en);
			line-height: 1;
			color: #FFF;
			width: 100%;
			margin-bottom: 0;
		}
		.board-sns-list {
			list-style: none;
			width: 100%;
			padding: 0;
			margin: 0;
			li {
				margin-bottom: 16px;
				a {
					display: flex;
					gap: 8px;
					font-size: 14px;
					line-height: 1;
					color: #FFF;
					white-space: nowrap;
				}
			}
		}
	}
}

.global-nav-menu {
	display: grid;
	gap: 36px;
	width: 600px;
	.global-nav-search {
		> p {
			font-size: 18px;
			font-weight: 600;
			color: #FFF;
			line-height: 1.55;
			margin-bottom: 16px;
		}
	}
	.global-nav-tag {
		> p {
			font-size: 18px;
			font-weight: 600;
			color: #FFF;
			line-height: 1.55;
			margin-bottom: 16px;
		}
	}
	.global-nav-ranking {
		> p {
			font-size: 18px;
			font-weight: 600;
			color: #FFF;
			line-height: 1.55;
			margin-bottom: 16px;
		}
		.article-list {
			counter-reset: ranking;
			flex-direction: column;
			gap: 32px;
			.article-item {
				counter-increment: ranking;
				flex-direction: row;
				align-items: flex-start;
				width: 100%;
				.article-item-image {
					width: 180px;
				}
				.article-item-body {
					flex: 1;
					&::before {
						content: counter(ranking);
						font-size: 18px;
						font-family: var(--en);
						font-weight: 600;
						font-style: italic;
						color: var(--color-theme-2);
						line-height: 1;
					}
				}
				.article-item-title {
					font-size: 15px;
					color: #FFF;
					margin-bottom: 5px;
				}
				.article-item-date {
					display: none;
				}
				.article-item-category li {
					font-size: 12px;
					color: #FFF;
				}
			}
			li {
				&:nth-child(2) .article-item-body::before {
					color: var(--color-theme-3);
				}
				&:nth-child(3) .article-item-body::before {
					color: var(--color-theme-4);
				}
			}
		}
	}
}

.global-nav-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
	li {
		display: contents;
		a {
			font-size: 14px;
			font-weight: 600;
			background: #FFF;
			border: 1px solid #cccccc;
			border-radius: 64px;
			padding: 8px 16px;
		}
	}
}

@media(max-width: 1180px) {
	.header-search-button {
		display: none;
	}
	.global-nav-content {
		gap: 64px;
		padding-inline: 64px;
	}
	.global-nav-info {
		width: calc(45% - 64px * 0.55);
	}
	.global-nav-menu {
		width: calc(50% - 64px * 0.5);
	}
}

@media screen and (max-width: 990px) {
	.site-header {
		padding: 0 0 0 32px;
		height: auto;
	}
	.header-actions {
		gap: 20px;
	}
	.header-nav {
		display: none;
	}
	.header-nav-item {
		font-size: 13px;
	}
	.header-search-button {
		display: block;
	}
	.header-menu-button {
		justify-content: center;
		padding: 32px;
		width: 90px;
		gap: 10px;
	}
	.global-nav-menu {
		display: none;
		width: 100%;
	}
	.global-nav-content {
		flex-direction: column;
		width: 80%;
		padding: 72px 0;
		margin-inline: auto;
	}
	.global-nav-list {
		display: grid;
	}
	.global-nav-info {
		width: 100%;
		.manage {
			gap: 20px;
			margin-bottom: 56px;
		}
		.official-sns {
			flex-direction: column;
			gap: 20px;
		}
		.board-sns {
			flex-direction: column;
			gap: 20px;
			.board-sns-list {
				display: flex;
				gap: 24px;
				li {
					margin-bottom: 0;
					a {
						font-size: 13px;
					}
				}
			}
		}
	}
	body.noscroll {
		header:has( + .global-nav.search ) .header-search-button {
			display: none;
		}
		.global-nav.search {
			.global-nav-list,
			.global-nav-info {
				display: none;
			}
			.global-nav-menu {
				display: grid;
			}
		}
	}
}

@media screen and (max-width: 540px) {
	.site-header {
		padding: 0 0 0 24px;
		height: 70px;
	}
	.header-logo img {
		width: 134px;
	}
	.header-actions {
		gap: 20px;
	}
	.header-search-button {
		display: flex;
	}
	.header-menu-button {
		gap: 4px;
		padding: 24px;
		width: 70px;
		img {
			width: 22px;
		}
		&::before,
		&::after {
			width: 2px;
			height: 20px;
		}
	}
	.global-nav {
		padding-top: 70px;
		padding-bottom: 96px;
	}
	.global-nav-content {
		width: 100%;
		padding: 72px 40px;
	}
	.global-nav-info {
		.manage img {
			width: 230px;
		}
		.board-sns {
			gap: 24px;
			.board-sns-list {
				flex-wrap: wrap;
				gap: 20px 24px;
			}
		}
	}
	.global-nav-tag-list {
		li {
			a {
				font-size: 12px;
			}
		}
	}
	body.noscroll {
		.global-nav.search {
			.global-nav-content {
				padding: 18px 40px;
			}
		}
	}
	.global-nav-menu {
		.global-nav-ranking {
			.article-list {
				.article-item {
					flex-direction: column;
					.article-item-image {
						width: 100%;
					}
					.article-item-body {
						position: relative;
						padding-inline: 20px;
						&::before {
							position: absolute;
							top: 1px;
							left: 0;
						}
					}
					.article-item-title {
						font-size: 13px;
						font-weight: 400;
						margin-bottom: 6px;
					}
					.article-item-category li {
						font-size: 11px;
					}
				}
			}	
		}
	}
}

/*		フッター		*/
.footer-tag-menu {
	display: flex;
	gap: 80px;
	justify-content: center;
	align-items: baseline;
	background: #1F1F1F;
	width: 100%;
	padding: 56px 40px;
	> p {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-size: 20px;
		font-weight: 700;
		color: #FFFF;
		letter-spacing: 0;
		text-align: center;
		&::before {
			content: "";
			display: inline-block;
			width: 24px;
			aspect-ratio: 1 / 1;
			background: url(img/icon-search.svg) center / cover;
		}
	}
}

.footer-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	width: 620px;
	padding: 0;
	margin: 0;
	li a {
		display: flex;
		align-self: center;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.5;
		color: #000;
		background: #FFF;
		border-radius: 80px;
		padding: 8px 16px;
	}
}

.footer-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	background: #000;
	padding-block: 72px;
}

.footer-columns {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 1124px;
	gap: 0;
	max-width: 100%;
}

.footer-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	p {
		font-size: 15px;
		font-weight: 400;
		line-height: 1.4;
		color: #FFF;
		margin-bottom: 0;
	}
}

.footer-nav {
	display: flex;
	align-items: flex-start;
	gap: 96px;
	padding: 0;
	margin: 0;
}

.footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	> li {
		> a,p {
			position: relative;
			display: block;
			color: #FFF;
			font-size: 16px;
			font-weight: 500;
			letter-spacing: 0;
			line-height: 1.3;
			img {
				position: absolute;
				top: 7px;
				left: -17px;
			}
		}
	}
}

.footer-sub-menu {
	list-style: none;
	padding: 0;
	margin-top: 16px;
	margin-bottom: 0;
	li {
		line-height: 1;
		margin-bottom: 10px;
		&:last-child {
			margin-bottom: 0;
		}
		a {
			font-size: 14px;
			font-weight: 300;
			letter-spacing: 0;
			line-height: 1.3;
			color: #FFF;
			img {
				margin-left: 8px;
			}
		}
	}
}

.copyright {
	font-size: 11px;
	font-weight: 400;
	font-family: var(--en);
	letter-spacing: 0;
	line-height: 1;
	text-align: left;
	color: #FFF;
	max-width: 1124px;
	width: 90%;
	margin-bottom: 0;
}

@media(max-width: 1180px) {
	.footer-tag-list {
		width: 530px;
	}
	.footer-content {
		gap: 64px;
	}
	.footer-columns {
		gap: 64px;
		width: 90%;
	}
}

@media(max-width: 990px) {
	.footer-tag-menu {
		flex-direction: column;
		align-items: center;
		gap: 32px;
		> p {
			margin-inline: auto;
			margin-bottom: 0;
		}
	}
	.footer-tag-list {
		justify-content: center;
		width: calc(90% - (32px * 0.10000000000000003));
	}
	.footer-columns {
		gap: 56px;
		justify-content: center;
	}
	.footer-left {
		align-items: center;
	}
	.footer-nav {
		flex-direction: column;
		width: 100%;
		gap: 56px;
	}
	.footer-sub-menu {
		display: flex;
		gap: 24px;
		margin-top: 24px;
		li {
			margin-bottom: 0;
		}
	}
	.copyright {
		text-align: center;
	}
}

@media(max-width: 540px) {
	.footer-tag-menu {
		gap: 20px;
		padding: 40px 28px;
		> p {
			font-size: 18px;
		}
	}
	.footer-tag-list {
		width: 100%;
		li a {
			font-size: 12px;
		}
	}
	.footer-content {
		gap: 56px;
		padding: 56px 40px;
	}
	.footer-logo img {
		width: 148px;
	}
	.footer-left p {
		font-size: 12px;
	}
	.footer-nav {
		gap: 40px;
	}
	.footer-menu {
		> li {
			> a,p {
				font-size: 14px;
				img {
					width: 6px;
					left: -13px;
				}
			}
		}
	}
	.footer-sub-menu {
		flex-wrap: wrap;
		li {
			a {
				font-size: 13px;
			}
		}
	}
}

/*		トップページ		*/
.hero {
	position: relative;
	background: #edf2f3;
	padding-block: 40px;
	&::before {
		content: "";
		width: 155%;
		height: 100%;
		background-image: url(img/hero-bg.webp);
		background-position: 50%;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

.hero-slide {
	position: relative;
	overflow: hidden;
	padding-block: 40px;
	.splide__track {
		overflow: visible;
	}
	.splide__slide {
		width: calc(39% - (20px * 0.61));
	}
	.hero-slide-arrow {
		position: absolute;
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
	}
	.splide__arrow {
		background: transparent;
		top: -43px;
		width: 50px;
		max-width: 100%;
		height: 89px;
		border-radius: 0;
		opacity: 1;
		transform: none;
		transition: .4s cubic-bezier(.4,.4,0,1);
		&:hover {
			opacity: 1;
			transform: scale(1.1, 1.1);
		}
	}
	.splide__arrow--prev {
		left: 60px;
	}
	.splide__arrow--next {
		right: 60px;
	}
}

.hero-card {
	display: flex;
	align-content: center;
	align-items: center;
	background: #FFF;
	border: 2px solid #000;
	border-radius: 20px;
	box-shadow: 0 10px 5px rgba(0,0,0,0.2);
	flex: none;
	flex-direction: column;
	height: 100%;
	justify-content: flex-start;
	outline-offset: -4px;
	padding: 20px;
	.hero-card-image img {
		width: 100%;
		aspect-ratio: 300 / 157;
		object-fit: cover;
	}
	.hero-card-body {
		width: 100%;
	}
	.hero-card-title {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.55;
		margin: 16px 0px 8px 0px;
		max-width: 100%;
		width: 100%;
	}
	.hero-card-date {
		display: block;
		color: #666666;
		font-size: 12px;
		font-weight: 400;
		line-height: 1;
		margin: 0px 0px 8px 0px;
		max-width: 100%;
	}
	.hero-card-category {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: 4px 10px;
		padding: 0;
		margin: 0;
		li {
			color: #333333;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.4;
			text-align: left;
			justify-content: flex-start;
		}
	}
}

@media(max-width: 990px) {
	.hero::before {
		height: 90%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.hero-slide {
		.splide__slide {
			width: calc(70% - (20px * 0.3));
		}
		.splide__arrow {
			width: 36px;
			height: 70px;
		}
		.splide__arrow--prev {
			left: 20px;
		}
		.splide__arrow--next {
			right: 20px;
		}
	}
	.hero-card {
		.hero-card-category {
			padding: 4px 10px;
		}
	}
}

@media(max-width: 540px) {
	.hero-slide {
		.splide__slide {
			width: 300px;
		}
		.splide__arrow {
			width: 28px;
			height: 48px;
			top: -28px;
		}
		.splide__arrow--prev {
			left: 20px;
		}
		.splide__arrow--next {
			right: 20px;
		}
	}
	.hero-card {
		.hero-card-title {
			font-size: 16px;
			font-weight: 600;
			line-height: 1.55;
		}
		.hero-card-category {
			padding: 0;
			li {
				font-size: 12px;
			}
		}
	}
}


/*		トップ		*/
.top-layout {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	width: calc(86% -  (64px * 0.14000000000000004));
	gap: 64px;
	padding-block: 88px;
	margin-inline: auto;
}

.top-content {
	flex: 1;
}

.sidebar {
	display: grid;
	width: 345px;
	gap: 48px;
	h3 {
		font-size: 18px;
		color: #333;
		font-weight: 600;
		line-height: 1.55;
		margin-bottom: 16px;
	}
}

.sidebar-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
	li {
		display: contents;
		a {
			font-size: 16px;
			line-height: 1;
			font-weight: 400;
			border: 1px solid #ccc;
			border-radius: 32px;
			padding: 4px 10px;
		}
	}
}

.sidebar-banner {
	display: grid;
	gap: 16px;
}

.banner-linkedin {
	display: grid;
	background: #0b66c2;
	gap: 12px;
	border-radius: 8px;
	padding: 20px;
	p {
		font-size: 13px;
		font-weight: 400;
		line-height: 1.2;
		color: #FFF;
		margin-bottom: 0;
	}
}

.banner-facebook {
	display: grid;
	background: #0766ff;
	gap: 12px;
	border-radius: 8px;
	padding: 20px;
	p {
		font-size: 13px;
		font-weight: 400;
		line-height: 1.2;
		color: #FFF;
		margin-bottom: 0;
	}
}

.banner-turing {
	display: grid;
	background: #edf2f3;
	gap: 12px;
	border: 1px solid #000;
	border-radius: 8px;
	padding: 20px;
	h4 {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
		margin-bottom: 0;
	}
	img {
		filter: invert(1);
	}
	p {
		font-size: 13px;
		font-weight: 400;
		margin-bottom: 0;
	}
	a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		font-size: 12px;
		font-weight: 400;
		line-height: 1;
		color: #FFF;
		background: #5b5757;
		border-radius: 48px;
		padding: 8px 20px;
		box-shadow: 0 0 0 0 rgba(0,0,0,0.2);
		&::after {
			content: "";
			width: 8px;
			height: 8px;
			border-top: 2px solid #FFF;
			border-right: 2px solid #FFF;
			transform: rotate(45deg);
		}
	}
}

.banner-casual {
	position: relative;
	border: 1px solid #000;
	border-radius: 8px;
	overflow: hidden;
}

.section-title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 40px;
	.section-title-ja {
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 1.55;
		text-align: center;
		color: #DC0E0E;
		margin-bottom: 0;
	}
	.section-title-en {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		font-size: 44px;
		font-family: var(--en);
		font-weight: 700;
		letter-spacing: 0;
		line-height: 1;
		order: -1;
		&::before,
		&::after {
			content: "";
			display: block;
			width: 100%;
			height: 1px;
			background: #4B4B4B;
			flex: 1;
		}
	}
}

@media(max-width: 1180px) {
	.top-layout {
		width: calc(90% - (56px * 0.10000000000000003));
		gap: 56px;
	}
	.sidebar {
		width: calc(28% - (56px * 0.72));
	}
}

@media(max-width: 990px) {
	.top-layout {
		flex-direction: column;
		width: 90%;
	}
	.sidebar {
		width: 100%;
	}
	.sidebar-search,
	.sidebar-tag,
	.banner-linkedin,
	.banner-facebook,
	.banner-turing {
		display: none;
	}
}

@media(max-width: 540px) {
	.top-layout {
		padding-block: 64px;
	}
	.section-title {
		margin-bottom: 36px;
		.section-title-ja {
			font-size: 14px;
		}
		.section-title-en {
			font-size: 28px;
		}
	}
}

.article-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 36px;
	width: 100%;
	padding: 0;
	margin-bottom: 0;
	> li {
		display: contents;
	}
}

.article-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 16px;
	width: calc(33.3% - (36px * 0.667));
	.article-item-image {
		position: relative;
		overflow: hidden;
		border: 1px solid #000;
		border-radius: 4px;
		img {
			width: 100%;
			aspect-ratio: 300 / 157;
			object-fit: cover;
		}
	}
	.article-item-title {
		font-size: 16px;
		line-height: 1.55;
		font-weight: 600;
		letter-spacing: 0;
		margin-bottom: 10px;
	}
	.article-item-date {
		display: flex;
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1;
		color: #666666;
		margin-bottom: 10px;
	}
	.article-item-category {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 10px;
		list-style: none;
		padding: 0;
		margin: 0;
		li {
			font-size: 13px;
			font-weight: 400;
			color: #000;
		}
	}
}

.top-ranking {
	margin-bottom: 88px;
}

.ranking-box {
	counter-reset: ranking;
	.article-list {
		flex-wrap: nowrap;
	}
	.article-item {
		counter-increment: ranking;
		.article-item-body {
			position: relative;
			padding-left: 21px;
			&::before {
				content: counter(ranking);
				font-size: 21px;
				font-family: var(--en);
				font-weight: 700;
				font-style: italic;
				color: var(--color-theme-2);
				position: absolute;
				top: -2px;
				left: 0;
			}
		}
		
	}
	li {
		&:nth-child(2) .article-item-body::before {
			color: var(--color-theme-3);
		}
		&:nth-child(3) .article-item-body::before {
			color: var(--color-theme-4);
		}
	}
}

@media(max-width: 1180px) {
	.article-list,
	.ranking-box .article-list {
		flex-wrap: wrap;
		gap: 40px 36px;
	}
	.article-item {
		width: calc(50% - (36px * 0.5));
	}
}

@media(max-width: 990px) {
	.ranking-box .article-list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 36px;
	}
	.ranking-box .article-item {
		width: 100%;
	}
}

@media(max-width: 540px) {
	.article-item {
		width: 100%;
		gap: 12px;
		.article-item-title {
			font-size: 15px;
			margin-bottom: 8px;
		}
		.article-item-date {
			margin-bottom: 8px;
		}
		.article-item-category {
			li {
				font-size: 12px;
				line-height: 1;
			}
		}
	}
}

.top-articles {
	display: grid;
	gap: 40px;
	.section-title {
		margin-bottom: 0;
	}
}

.article-list-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 36px;
	width: 100%;
	padding: 0;
	margin-bottom: 0;
	.article-list {
		display: contents;
	}
	.ajax-load-more-wrap {
		display: contents;
		.alm-btn-wrap {
			flex: 0 0 100%;
		}
	}
}

.ajax-load-more-wrap {
	transition: none;
	.article-list:has(li) {
		margin-bottom: 40px;
	}
	.alm-btn-wrap {
		transition: none;
		.alm-load-more-btn {
			display: grid;
			justify-content: center;
			align-items: center;
			gap: 4px;
			font-size: 15px;
			font-weight: 600;
			line-height: 1.55;
			width: 100%;
			background: #FFF;
			border: 1px solid #000;
			color: #333;
			padding-block: 10px;
			&::after {
				content: "";
				--mask: url(img/icon-arrow-up.svg) no-repeat center / contain;
				aspect-ratio: 13 / 8;
				width: 13px;
				background: var(--color-theme-1);
				display: inline-block;
				height: auto;
				-webkit-mask: var(--mask);
				mask: var(--mask);
				margin-inline: auto;
				transform: scale(1,-1);
			}
		}
		&:has(.alm-load-more-btn.done) {
			visibility: hidden !important;
            opacity: 0;
            margin: 0;
            height: 0;
		}
	}
}

/*		タグページ		*/
.archive-title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: #333;
	background: #edf2f3;
	padding-block: 72px;
	margin-bottom: 0;
}

.archive-content {
	--container: 885px; 
	width: 100%;
	padding-block: 88px;
	margin-inline: auto;
}

.article-list-layout:has( + .archive-ranking ) {
	margin-bottom: 88px;
}

/* 検索 */

.searchform {
	border: 1px solid #000;
	border-radius: 4px;
	display: flex;
	height: 56px;
	overflow: hidden;
}

#s {
	background: #fff;
	border: 1px solid #eee;
	border-right: 0;
	color: #333;
	flex: 1;
	font-size: 16px;
	font-weight: 400;
	height: 100%;
	line-height: 1;
	padding: 12px 0px 12px 20px;
	max-width: 100%;
	outline: none;
	&::placeholder {
		font-weight: 400;
	}
}

#searchsubmit {
	background: none;
	border: 0;
	display: flex;
	flex: none;
	height: 100%;
	justify-content: center;
	line-height: 1.4;
	padding-inline: 14px 18px;
	width: auto;
	max-width: 100%;
	background: #FFF;
	&::before {
		--mask: url(./img/icon-search.svg) no-repeat center/contain;
		aspect-ratio: 1;
		content: '';
		background: #dc0e0e;
		display: inline-block;
		height: auto;
		-webkit-mask: var(--mask);
		mask: var(--mask);
		width: 27px;
	}
}

/*		検索結果一覧		*/
.search-text-content {
	display: grid;
	gap: 12px;
	max-width: 600px;
	margin-bottom: 88px;
	margin-inline: auto;
	p {
		font-size: 16px;
		color: #666666;
		line-height: 1;
		margin-bottom: 0;
	}
}

/*		目次		*/
div#ez-toc-container {
	border-radius: 8px;
	padding: 40px 48px;
	margin: 56px 0;
}

div#ez-toc-container ul li:not(:last-child) {
	margin-bottom: 16px;
}

div#ez-toc-container ul.ez-toc-list a {
	text-decoration: underline;
	&:hover {
		opacity: 0.7;
	}
}

@media(max-width: 540px) {
	div#ez-toc-container {
		padding: 28px 30px;
		margin: 40px 0;
	}
	div#ez-toc-container ul.ez-toc-list a {
		font-size: 14px;
	}
}

/*		詳細		*/

.single-thumbnail {
	background: #edf2f3;
	text-align: center;
	img {
		width: 100%;
		max-width: 1440px;
	}
}

.single-content {
	display: grid;
	padding: 88px 0 0 0;
	margin-inline: auto;
	width: 700px;
	@media (max-width: 990px) {
		width: 90%;
	}
	@media (max-width: 540px) {
		padding-top: 36px;
	}
}

.single-title {
	font-size: 42px;
	font-weight: 600;
	line-height: 1.55;
	margin: 0 0 20px;
	@media (max-width: 540px) {
		font-size: 24px;
		margin-bottom: 16px;
	}
}

.single-date {
	color: var(--color-gray-1);
	display: block;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 20px 0;
	@media (max-width: 540px) {
		font-size: 16px;
		margin-bottom: 16px;
	}
}

.tag-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tag-item {
	background: #fff;
	border: 1px solid var(--color-gray-2);
	border-radius: 80px;
	color: #000;
	display: inline-flex;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	padding: 8px 16px;
	@media (max-width: 540px) {
		font-size: 14px;
	}
}

.single-body {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.85;
	> p {
		margin-block: 40px;
	}
	a:where(p *, li *) {
		color: #007cff;
		text-decoration: underline;
	}
	> .wp-block-image {
		margin-block: 56px;
	}
	@media (max-width: 540px) {
		font-size: 16px;
		> p {
			margin-block: 20px;
		}
		> .wp-block-image {
			margin-block: 40px;
		}
	}
}

.single-aside,
.single-footer {
	display: grid;
	gap: 88px;
	margin-inline: auto;
	width: 887px;
	@media (max-width: 1180px) {
		width: 800px;
	}
	@media (max-width: 990px) {
		width: 90%;
	}
}

.single-footer {
	padding-top: 120px;
	@media (max-width: 540px) {
		gap: 40px;
		padding-top: 64px;
	}
}

.single-aside {
	padding-block: 120px;
	@media (max-width: 540px) {
		gap: 64px;
		padding-block: 64px;
	}
}

.recruit-cta {
	align-items: center;
	background: #1b1b1b;
	border-radius: 8px;
	display: grid;
	gap: 24px;
	padding: 40px 48px;
	@media (min-width: 991px) {
		grid-template-columns: 190px 1fr;
		gap: 46px;
	}
	@media (max-width: 540px) {
		gap: 20px;
		padding: 36px 40px;
	}
}

.recruit-media {
	display: grid;
	gap: 24px;
	@media (max-width: 540px) {
		gap: 20px;
	}
}

.recruit-logo {
	padding-inline: 16px;
	@media (max-width: 540px) {
		justify-self: center;
		padding: 0;
		width: 196px;
	}
}

.recruit-content {
	display: grid;
	gap: 20px;
	@media (max-width: 990px) {
		gap: 40px;
	}
	@media (max-width: 540px) {
		gap: 36px;
	}
}

.recruit-link {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-size: 18px;
	font-weight: 600;
	gap: 7px;
	line-height: 1;
	&::before {
		--mask: url(./img/icon-chevron.svg) no-repeat center/contain;
		aspect-ratio: 11/15;
		background: var(--color-theme-1);
		content: "";
		display: inline-block;
		height: auto;
		-webkit-mask: var(--mask);
		mask: var(--mask);
		width: 11px;
	}
	@media (max-width: 990px) {
		justify-self: center;
	}
	@media (max-width: 540px) {
		font-size: 16px;
		&::before {
			width: 9px;
		}
	}
}

.job-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 15px;
	line-height: 1;
	@media (min-width: 991px) {
		padding-left: 18px;
	}
	@media (max-width: 540px) {
		gap: 18px;
	}
}

.job-item {
	align-items: flex-start;
	color: #fff;
	display: inline-flex;
	font-size: 16px;
	font-weight: 400;
	gap: 8px;
	line-height: 1.4;
	&::before {
		--mask: url(./img/icon-arrow-up-right.svg) no-repeat center/contain;
		aspect-ratio: 1;
		background: currentColor;
		content: "";
		display: inline-block;
		height: auto;
		-webkit-mask: var(--mask);
		mask: var(--mask);
		margin: 8px 0 0 0;
		width: 9px;
	}
	@media (max-width: 540px) {
		font-size: 14px;
		&::before {
			margin-top: 5px;
		}
	}
}

.single-share {
	display: grid;
	gap: 16px;
	@media (max-width: 540px) {
		gap: 12px;
	}
}

.share-title {
	color: #111;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.share-list {
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	display: flex;
	gap: 30px;
	justify-content: center;
	@media (max-width: 540px) {
		gap: 24px;
		.share-item {
			img {
				width: 44px;
			}
		}
	}
}

.single-tag {
	align-items: center;
	background: #1f1f1f;
	border-radius: 8px;
	display: grid;
	gap: 32px;
	padding: 36px 48px;
	@media (min-width: 991px) {
		grid-template-columns: auto 1fr;
		gap: 64px;
	}
	@media (max-width: 540px) {
		gap: 20px;
		padding: 28px 30px;
	}
	.tag-item {
		border: 0;
		font-size: 16px;
		font-weight: 600;
		@media (max-width: 540px) {
			font-size: 12px;
			padding: 6px 14px;
		}
	}
}

.tag-title {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	@media (max-width: 990px) {
		justify-self: center;
	}
	@media (max-width: 540px) {
		font-size: 16px;
	}
}

.breadcrumbs {
	align-items: center;
	color: var(--color-gray-2);
	display: flex;
	flex-wrap: wrap;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	gap: 8px 16px;
	padding-block: 20px;
	margin-inline: auto;
	width: 1124px;
	@media (max-width: 1180px) {
		width: 800px;
	}
	@media (max-width: 990px) {
		width: 90%;
	}
	> span {
		color: var(--color-gray-3);
		font-weight: 500;
	}
	a {
		color: var(--color-body-1);
	}
	@media (max-width: 540px) {
		font-size: 13px;
		gap: 4px 10px;
	}
}

/*		popup		*/
.popup-trigger {
	display: block;
	height: 100vh;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -100;
}

.popup {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 5;
	transition: var(--ts);
	&:not(.show) {
		opacity: 0;
		visibility: hidden;
	}
}

.popup-close {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	width: 22px;
	height: 22px;
	color: #FFF;
	background: #333333;
	border: 0;
	border-radius: 40px;
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 5;
}

.popup-box {
	border: 2px solid #333;
	display: block;
	width: 300px;
	position: relative;
}

.popup-body {
	background: #333;
	display: grid;
	gap: 12px;
	text-align: center;
	padding: 12px 16px;
	> * {
		margin-bottom: 0;
	}
}

.popup-more {
}

.popup-text {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: #FFF;
}

.popup-more {
	font-size: 13px;
	letter-spacing: 0.04em;
	line-height: 1;
	color: #FFF;
	background: #AD002D;
	border-radius: 90px;
	padding: 10px 36px 10px 36px;
}

@media (max-width: 990px) {
	.popup-box {
		width: 222px;
	}
	.popup-body {
		padding: 12px 12px;
	}
	.popup-text {
		font-size: 12px;
	}
	.popup-more {
		font-size: 12px;
		padding: 8px 24px 8px 24px;
	}
}