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

html {
	scroll-behavior: smooth;
}

* {
	--font-size: calc((var(--fs) / 16) * 1rem);
	font-size: var(--font-size);
}

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

body {
	/* background: #1e1e1e; */
	background: #2d2d2d;
	color: var(--color-body-1);
	font-family: var(--gothic);
	font-weight: var(--fw);
}

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

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

a {
	color: var(--color-body-1);
	text-decoration: none;
}

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

@media (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

main {
	overflow: clip;
}

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

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

.header {
	display: flex;
	justify-content: space-between;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 6;
}

.header-title {
	display: contents;
}

.header-logo {
	display: inline-block;
	line-height: 1px;
	margin: 30px 0 0 40px;
	transition: var(--ts);
	&:hover {
		opacity: var(--op);
	}
}

.header-nav {
	display: flex;
}

.header-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 32px;
	margin-top: 20px;
	@media (min-width: 992px) {
		li {
			position: relative;
			&::after {
				background: linear-gradient(to right, var(--color-theme-1), var(--color-theme-1)) no-repeat 100% 100%/0 100%;
				content: "";
				display: block;
				height: 4px;
				left: 0;
				position: absolute;
				right: 0;
				top: calc(100% + 27px);
				transition: background-size var(--ts);
			}
			&:has(.header-item:hover)::after {
				background-position: 0 100%;
				background-size: 100% 100%;
			}
			&:has(.header-item.active)::after {
				background: var(--color-theme-1);
			}
		}
	}
}

.header-item {
	color: #fff;
	display: inline-block;
	font-weight: 700;
	position: relative;
	@media (min-width: 992px) {
		&::after {
			bottom: -10px;
			content: "";
			left: -10px;
			position: absolute;
			right: -10px;
			top: -10px;
		}
	}
}

.header-cta-menu,
.header-lang ul,
.header-lang-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	li {
		display: contents;
	}
}

.header-lang ul,
.header-lang-menu {
	align-items: center;
	margin: 20px 44px 0 32px;
	gap: 10px;
	li + li::before {
		--fs: 15;
		content: "/";
		font-weight: 700;
	}
}

.header-lang ul {
	flex-direction: row-reverse;
	.bogo-language-name a {
		--fs: 15;
		font-weight: 700;
		&.current {
			color: var(--color-theme-1);
		}
		&:hover {
			text-decoration: underline;
		}
	}
}

.header-lang-item {
	--fs: 15;
	font-weight: 700;
	&.active {
		color: var(--color-theme-1);
	}
	&:hover {
		text-decoration: underline;
	}
}

.header-cta-item {
	--fs: 15;
	align-items: center;
	border: 3px solid var(--color-theme-1);
	display: flex;
	font-weight: 700;
	justify-content: center;
	min-width: 130px;
	min-height: 74px;
	padding: 11px 18px;
	text-align: center;
	position: relative;
	z-index: 0;
	background: rgba(0, 0, 0, 0.31);
	backdrop-filter: blur(3.5px);
	&.jobs {
	}
	&.contact {
		/* background: var(--color-theme-1); */
	}
	&::before {
		background: linear-gradient(to right, var(--color-theme-1), var(--color-theme-1)) no-repeat 100% 100%/0 100%;
		bottom: 0;
		content: "";
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: background-size var(--ts);
		z-index: -1;
	}
	&:hover::before {
		background-position: 0 100%;
		background-size: 100% 100%;
	}
	&.contact::before {
		background: linear-gradient(to right, var(--color-theme-1), var(--color-theme-1)) no-repeat 0 100%/100% 100%;
	}
	&.contact:hover::before {
		background-position: 100% 100%;
		background-size: 0% 100%;
	}
}

.footer {
	position: relative;
	background: #000;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px 0;
	padding: 64px 60px 18px;
	overflow: hidden;
}

.footer-logo {
	line-height: 1px;
	transition: var(--ts);
	&:hover {
		opacity: var(--op);
	}
}

.footer-address {
	line-height: var(--lh);
	margin-top: 14px;
}

.footer-nav {
	display: flex;
	gap: 40px;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	align-content: start;
	display: grid;
	gap: 14px;
}

.footer-item {
	align-items: center;
	display: inline-flex;
	gap: 14px;
	line-height: var(--lh);
	&[target="_blank"]::after {
		--mask: url(img/icon-divide.svg) no-repeat center/contain;
		aspect-ratio: 1;
		background: currentColor;
		display: inline-block;
		content: "";
		height: auto;
		-webkit-mask: var(--mask);
		mask: var(--mask);
		width: 12px;
	}
	&:hover {
		text-decoration: underline;
	}
}

.footer-copyright {
	--fs: 12;
	color: var(--color-gray-1);
	grid-column: 1/-1;
	padding: 10px;
	margin: 0;
}

@media (min-width: 992px) {
	.header-drawer,
	.js-drawer {
		display: contents;
	}
}

@media (max-width: 1199px) {
	.header-logo {
		margin: 25px 0 0 20px;
		width: 168px;
	}
	.header-menu {
		gap: 24px;
	}
	.header-lang-menu {
		margin-inline: 24px 32px;
	}
}

@media (max-width: 991px) {
	body.noscroll {
		overflow: hidden;
		touch-action: pinch-zoom;
	}
	.header-drawer {
		background: rgba(0, 0, 0, 0.88);
		bottom: 0;
		left: 0;
		overflow: auto;
		padding: 0 0 32px;
		position: fixed;
		right: 0;
		top: 0;
		transition: opacity 0.6s;
		z-index: 10;
		&:is(body:not(.noscroll) *) {
			opacity: 0;
			visibility: hidden;
			transition: 0s;
		}
	}
	.header-drawer-toggle {
		align-items: center;
		background: #2d2d2d;
		border: 0;
		border-radius: 6px;
		color: var(--color-body-1);
		display: inline-flex;
		font-family: var(--en);
		gap: 10px;
		padding: 8px 0 8px 10px;
		position: fixed;
		right: 10px;
		top: 20px;
		z-index: 11;
		min-width: 104px;
		&[aria-expanded="false"] .header-drawer-toggle-close,
		&[aria-expanded="true"] .header-drawer-toggle-open {
			display: none;
		}
		&:hover {
			opacity: 1;
		}
	}
	.header-drawer-toggle-icon {
		display: block;
		height: 8px;
		width: 18px;
		position: relative;
		&::after,
		&::before {
			content: "";
			display: block;
			height: 2px;
			width: 18px;
			left: calc(50% - 9px);
			position: absolute;
			transition:
				top var(--ts) var(--ts),
				transform var(--ts);
		}
		&::before {
			background: #d9d9d9;
			top: calc(100% - 2px);
		}
		&::after {
			background: var(--color-theme-1);
			top: 0;
		}
		&:where([aria-expanded="true"] *) {
			&::after,
			&::before {
				top: calc(50% - 1px);
				transition:
					top var(--ts),
					transform var(--ts) var(--ts);
			}
			&::before {
				transform: rotate(-45deg);
			}
			&::after {
				transform: rotate(45deg);
			}
		}
	}
	.header-drawer-toggle-text {
		font-weight: 500;
	}
	.header-menu {
		border-top: 2px solid var(--color-theme-1);
		border-bottom: 2px solid var(--color-theme-1);
		display: grid;
		gap: 0;
		margin-top: 35px;
		padding: 8px 15px 16px;
		li + li {
			border-top: 2px solid var(--color-theme-1);
		}
	}
	.header-item {
		--fs: 24;
		font-size: var(--font-size);
		align-items: center;
		display: flex;
		justify-content: space-between;
		padding: 16px 16px 16px 0;
		&::after {
			aspect-ratio: 1;
			background: url(img/icon-up-right-square.svg) no-repeat center/contain;
			content: "";
			display: inline-block;
			height: auto;
			width: 21px;
		}
		&[target="_blank"]::after {
			background-image: url(img/icon-divide-2.svg);
			width: 24px;
		}
	}
	.header-lang-menu,
	.header-lang ul {
		gap: 16px;
		justify-content: flex-end;
		margin: 32px 20px;
		li + li::before {
			--fs: 25;
		}
	}
	.header-lang-item,
	.header-lang ul .bogo-language-name a {
		--fs: 24;
	}
	.header-cta {
		margin: 0 15px;
	}
	.header-cta-item {
		--fs: 15;
		width: 100%;
	}
	.footer {
		padding: 0 0 10px;
		grid-template-columns: unset;
		gap: 0;
	}
	.footer-nav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		margin-right: -1px;
		margin-bottom: 72px;
		padding-top: 1px;
		order: -1;
	}
	.footer-menu {
		grid-template-columns: subgrid;
		grid-template-rows: subgrid;
		grid-row: span 10;
		gap: 0;
		li {
			display: contents;
		}
	}
	.footer-item {
		border: 1px solid #373737;
		gap: 20px;
		justify-content: space-between;
		margin-top: -1px;
		margin-left: -1px;
		padding: 16px;
		&:not([target="_blank"])::after {
			--mask: url(img/icon-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);
			width: 13px;
		}
	}
	.footer-info {
		text-align: center;
	}
	.footer-address {
		line-height: unset;
		margin-top: 24px;
	}
	.footer-copyright {
		padding: 0;
		text-align: center;
	}
}

@media (min-width: 992px) {
	.header-drawer-toggle {
		display: none;
	}

	.header-drawer {
		display: contents;
		.header-logo {
			display: none;
		}
	}
}

/*		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;
	--fs: 12;
	font-size: var(--font-size);
	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 {
	--fs: 16;
	font-size: var(--font-size);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: #fff;
}

.popup-more {
	--fs: 13;
	font-size: var(--font-size);
	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 {
		--fs: 12;
		font-size: var(--font-size);
	}
	.popup-more {
		--fs: 12;
		font-size: var(--font-size);
		padding: 8px 24px 8px 24px;
	}
}

.top-mv {
	align-items: center;
	background: url(img/top-mv-bg.webp) no-repeat center/cover;
	display: flex;
	height: 100vh;
	justify-content: center;
	padding: 15px;
	min-height: 540px;
	position: relative;
	z-index: 0;
}

.top-mv-bg {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	&::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
		background-size: 4px 4px;
		background-position:
			0 0,
			2px 2px;
		pointer-events: none;
	}
	/*
	video {
		object-fit: cover;
		height: 100%;
		width: 100%;
	}
		*/
}

#ytplayer {
	/* aspect-ratio: 16/9; */
	/* object-fit: cover;
	height: 100%;
	width: 100%;
	pointer-events: none; */

	height: max(56.25vw, 100vh);
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: max(100vw, 178vh);
	pointer-events: none;
	/* transition: var(--ts);
	&:not(.show) {
		opacity: 0;
	} */
}

.top-mv-catch {
	--fs: 72;
	font-size: var(--font-size);
	font-weight: 700;
	line-height: calc(88 / 72);
	margin-bottom: 0;
}

.top-deco-en {
	--fs: 100;
	color: var(--color-theme-1);
	display: inline-block;
	font-size: var(--font-size);
	font-family: var(--en);
	font-weight: 700;
	line-height: 1.2;
	left: 0;
	position: absolute;
	top: -47px;
	&::before {
		--fs: 80;
		content: "# ";
		font-size: var(--font-size);
	}
}

.top-grid {
	display: grid;
	grid-template-columns: min(50%, 528px) 1fr;
	gap: 64px 72px;
}

.top-heading {
	--fs: 52;
	display: grid;
	gap: 24px;
	font-size: var(--font-size);
	font-weight: 700;
	margin-bottom: 60px;
	&::after {
		background: var(--color-theme-1);
		content: "";
		display: block;
		height: 7px;
		width: 100px;
	}
	@media (min-width: 992px) {
		&.text-lg-end::after {
			justify-self: end;
		}
	}
}

.top-heading-sub {
	--fs: 30;
	font-size: var(--font-size);
	font-weight: 500;
	margin-bottom: 20px;
}

.top-recruit {
	background: url(img/top-recruit-bg@1.5x.webp) no-repeat center/cover;
	position: relative;
	padding-block: 150px;
	z-index: 0;
	&::before {
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(12px);
		bottom: 0;
		content: "";
		display: block;
		left: 0;
		position: absolute;
		top: 0;
		width: calc((100vw - var(--content-w)) / 2 + 460px);
		z-index: -1;
	}
	.page-body {
		margin-bottom: 0;
	}
}

.top-recruit-catch {
	--fs: 44;
	font-size: var(--font-size);
	font-weight: 700;
	margin-bottom: 24px;
}

.top-recruit-buttons {
	place-self: center end;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-end;
}

.top-recruit-button {
	--fs: 28;
	align-items: center;
	background: rgba(0, 0, 0, 0.56);
	backdrop-filter: blur(6px);
	font-weight: 700;
	display: inline-flex;
	justify-content: space-between;
	padding: 39px 35px;
	position: relative;
	width: min(420px, 100%);
	z-index: 0;
	&::before {
		background: linear-gradient(to right, var(--color-theme-1), var(--color-theme-1)) no-repeat 100% 100%/0 100%;
		bottom: 0;
		content: "";
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: background-size var(--ts);
		z-index: -1;
	}
	&:hover {
		&::before {
			background-position: 0 100%;
			background-size: 100% 100%;
		}
		.top-recruit-button-icon::after {
			transform: translate(5px, -5px);
		}
	}
}

.top-recruit-button-icon {
	aspect-ratio: 1;
	display: inline-grid;
	height: auto;
	width: 35px;
	position: relative;
	&::after,
	&::before {
		aspect-ratio: 1;
		content: "";
		display: inline-block;
		grid-area: 1/-1;
		height: auto;
		width: 80%;
	}
	&::before {
		background: var(--color-theme-1);
		place-self: end start;
	}
	&::after {
		--mask: url(img/icon-up-right.svg) no-repeat center/contain;
		background: #fff;
		-webkit-mask: var(--mask);
		mask: var(--mask);
		place-self: start end;
		transition: transform var(--ts);
	}
}

.top-share-info {
	background:
		url(img/top-share-info-bg.webp) repeat-y right top,
		#000;
	padding-block: 180px 200px;
	position: relative;
	@media (min-width: 992px) {
		.top-deco-en {
			left: auto;
			right: 0;
		}
	}
	.top-heading {
		margin-bottom: 48px;
	}
}

.top-share-info-group + .top-share-info-group {
	margin-top: 60px;
}

.share-info-list {
	list-style: none;
	margin-bottom: 40px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(344px, 100%), 1fr));
	gap: 24px;
}

.share-info-item {
	display: grid;
	gap: 13px;
	> * {
		margin-bottom: 0;
	}
	&:hover {
		text-decoration: underline;
		.share-info-item-media img {
			transform: scale(1.1);
		}
	}
}

.share-info-item-media {
	aspect-ratio: 347/195;
	overflow: hidden;
	img {
		aspect-ratio: 347/195;
		object-fit: cover;
		width: 100%;
		transition: transform var(--ts);
	}
}

.share-info-item-title {
	font-weight: 700;
}

.top-news {
	background: url(img/top-news-bg.webp) no-repeat center top 270px / cover;
	padding-block: 170px 180px;
	position: relative;
}

.news-list {
	list-style: none;
	margin-bottom: 56px;
	padding: 0;
	li + li {
		border-top: 3px solid var(--color-theme-1);
		margin-top: 16px;
		padding-top: 16px;
	}
	&:has(+ .ajax-load-more-wrap) {
		margin-bottom: 0;
	}
}

.ajax-load-more-wrap {
	.news-list {
		margin: 0;
		li {
			border-top: 3px solid var(--color-theme-1);
			margin-top: 16px;
			padding-top: 16px;
		}
	}
	.alm-btn-wrap {
		transition: var(--ts);
		margin-top: 80px;
		.show-more {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0 19px;
			--fs: 24;
			font-size: var(--font-size);
			font-family: var(--en);
			font-weight: 600;
			max-width: 390px;
			width: 100%;
			background: #1f1f1f;
			border: 0;
			color: #fff;
			padding: 8px 30px;
			margin-inline: auto;
			&::after {
				--mask: url(img/icon-down.svg) no-repeat center / contain;
				aspect-ratio: 22 / 32;
				background: var(--color-theme-1);
				content: "";
				display: inline-block;
				height: auto;
				-webkit-mask: var(--mask);
				mask: var(--mask);
				width: 22px;
				transform: translateY(-2px);
			}
			&:hover {
				opacity: var(--op);
			}
		}
		&:has(.show-more.done) {
			visibility: hidden !important;
			opacity: 0;
			margin: 0;
			height: 0;
		}
	}
}

.news-item {
	align-items: center;
	display: grid;
	grid-template-columns: var(--img, 210px) 1fr auto;
	gap: 18px;
	padding-right: 24px;
	&::after {
		--mask: url(img/icon-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);
		width: 21px;
		transition: transform var(--ts);
	}
	&:hover {
		text-decoration: underline;
		.news-item-media img {
			transform: scale(1.1);
		}
		&::after {
			transform: translate(5px, -5px);
		}
	}
}

.news-item-media {
	aspect-ratio: 210/120;
	overflow: hidden;
	img {
		aspect-ratio: 210/120;
		object-fit: cover;
		width: 100%;
		transition: transform var(--ts);
	}
}

.news-item-content {
	line-height: var(--lh);
}

.news-item-info {
	display: flex;
	gap: 12px;
	align-items: center;
	&:has(.news-item-category)::after {
		content: "";
		width: 1px;
		height: 14px;
		background: var(--color-gray-1);
		order: -1;
	}
}

.news-item-date {
	color: var(--color-gray-2);
	order: -2;
}

.news-item-category {
	color: var(--color-gray-2);
}

.news-item-title {
	margin-bottom: 0;
}

.top-company {
	background: var(--color-theme-1-1);
	padding-block: 190px 260px;
	position: relative;
	@media (min-width: 992px) {
		.top-deco-en {
			left: auto;
			right: 0;
		}
	}
	.top-grid-media {
		place-self: center end;
	}
	.page-body {
		margin-bottom: 50px;
	}
}

@media (max-width: 991px) {
	.top-mv {
		background-image: url(img/top-mv-bg-sp@2x.webp);
		height: unset;
		justify-content: unset;
	}
	#ytplayer {
		max-height: 540px;
	}
	.top-mv-catch {
		--fs: 36;
	}
	.top-deco-en {
		--fs: 40;
		top: -21px;
		&::before {
			font-size: inherit;
		}
	}
	.top-grid {
		grid-template-columns: unset;
	}
	.top-heading {
		--fs: 32;
		gap: 16px;
		margin-bottom: 50px;
		&::after {
			height: 5px;
			width: 60px;
		}
	}
	.top-heading-sub {
		--fs: 24;
	}
	.top-recruit {
		background-image: url(img/top-recruit-bg-sp@2x.webp);
		padding-block: 100px 60px;
		&::before {
			inset: 0 0 auto 0;
			height: 285px;
			width: unset;
		}
	}
	.top-recruit-catch {
		--fs: 28;
	}
	.top-recruit-buttons {
		place-self: center;
		gap: 12px;
		justify-content: center;
	}
	.top-recruit-button {
		--fs: 24;
		padding: 26px 35px;
		width: min(350px, 100%);
	}
	.top-share-info {
		background-position: left calc(100% + 124px) top;
		padding-block: 100px 120px;
	}
	.share-info-list {
		margin-bottom: 60px;
	}
	.top-news {
		background-image: url(img/top-news-bg-sp@2x.webp);
		background-position: center;
		padding-block: 100px 120px;
	}
	.news-list li + li {
		margin-top: 20px;
		padding-top: 20px;
	}
	.ajax-load-more-wrap {
		.news-list {
			li {
				margin-top: 20px;
				padding-top: 20px;
			}
		}
		.alm-btn-wrap {
			margin-top: 60px;
			.show-more {
				--fs: 20;
				gap: 0 12px;
				max-width: 350px;
				padding: 10px 30px;
				&::after {
					width: 18px;
				}
			}
		}
	}
	.news-item {
		--img: 120px;
		padding-right: 0;
		&::after {
			width: 17px;
		}
	}
	.news-item-info {
		gap: 8px;
		&:has(.news-item-category)::after {
			height: 10px;
		}
	}
	.news-item-date {
		--fs: 14;
	}
	.news-item-category {
		--fs: 12;
		font-size: var(--font-size);
	}
	.news-item-title {
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.top-company {
		padding-block: 100px 200px;
		.top-grid {
			gap: 70px;
		}
		.top-grid-content {
			display: contents;
		}
		.top-heading {
			margin-bottom: 0;
			order: -2;
		}
		.top-grid-media {
			order: -1;
			place-self: center;
		}
	}
}

.page-header {
	background: url(img/page-header-bg@1.5x.webp) no-repeat center bottom/cover;
	display: grid;
	height: 260px;
	place-items: center;
	place-content: center;
	position: relative;
}

.page-header-en {
	--fs: 72;
	color: var(--color-theme-1);
	font-size: var(--font-size);
	font-family: var(--en);
	font-weight: 700;
	line-height: 1.2;
	&::before {
		--fs: 56;
		content: "# ";
		font-size: var(--font-size);
	}
}

.page-header-title {
	--fs: 24;
	font-size: var(--font-size);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0;
}

.breadcrumbs {
	align-items: baseline;
	bottom: 10px;
	color: var(--color-theme-1);
	display: flex;
	font-weight: 700;
	gap: 0 8px;
	left: 40px;
	position: absolute;
	> span {
		--fs: 12;
		color: var(--color-gray-3);
		font-size: var(--font-size);
		font-weight: var(--fw);
		&:last-child {
			flex: 1 0 0%;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 240px;
			white-space: nowrap;
		}
		br {
			display: none;
		}
	}
	a {
		color: inherit;
		text-decoration: underline;
	}
}

.page-content {
	--container: 810px;
	padding-block: 60px 120px;
}

.news-title {
	--fs: 32;
	font-size: var(--font-size);
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 0;
}

.news-date {
	--fs: 24;
	align-items: center;
	color: var(--color-theme-1);
	font-weight: 700;
	display: flex;
	gap: 18px;
	height: 88px;
	margin-bottom: 40px;
	&::after {
		background: currentColor;
		content: "";
		display: block;
		height: 3px;
		width: 100%;
	}
}

.news-media {
	display: grid;
	grid-template-columns: min(var(--content-w), 100%);
	gap: 60px;
	place-items: center;
	place-content: center;
	margin: 0 0 85px;
	&::after {
		background: var(--color-theme-1);
		content: "";
		display: block;
		height: 5px;
		width: 60px;
	}
	img {
		width: 100%;
	}
}

:where(.page-body) p {
	margin-bottom: 24px;
}

.page-body {
	line-height: var(--lh);
	p {
		&:empty {
			display: none;
		}
	}
	.wp-block-list li a,
	p a {
		align-items: baseline;
		color: #a0a0a0;
		text-decoration: underline;
		transition: opacity var(--ts);
		&::after {
			--mask: url(img/icon-up-right.svg);
			aspect-ratio: 1;
			background: #ff104e;
			content: "";
			display: inline-block;
			height: auto;
			-webkit-mask: var(--mask) no-repeat center/contain;
			mask: var(--mask) no-repeat center/contain;
			margin-left: 0.5em;
			width: 11px;
		}
		&[target="_blank"]::after {
			--mask: url(img/icon-divide.svg);
		}
		&:hover {
			opacity: var(--op);
		}
	}
}

@media (max-width: 991px) {
	.page-header {
		height: 220px;
	}
	.page-header-en {
		--fs: 36;
		&::before {
			--fs: 24;
		}
	}
	.page-header-title {
		--fs: 22;
	}
	.breadcrumbs {
		left: var(--padding);
		right: var(--padding);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.page-content {
		padding-block: 40px 100px;
	}
	.news-title {
		--fs: 24;
	}
	.news-date {
		--fs: 20;
		height: 64px;
		margin-bottom: 30px;
	}
	.news-media {
		margin-bottom: 80px;
	}
}

.js-scrollable {
	position: relative;
	overflow: scroll;
}

.js-scrollable > img {
	max-width: none;
}

li:has(.header-sub-menu):hover .header-sub-menu {
	opacity: 1;
	visibility: visible;
	transition: 0.2s;
}

li:has(.header-sub-menu)::after {
	content: none;
}

.header-sub-menu {
	position: absolute;
	list-style: none;
	width: max-content;
	padding: 0;
	margin-bottom: 0;
	background: rgba(0, 0, 0, 0.31);
	border: 3px solid var(--color-theme-1);
	margin-top: 10px;
	opacity: 0;
	visibility: hidden;
	&::before {
		content: "";
		width: 100%;
		height: calc(100% + 10px);
		position: absolute;
		top: -10px;
		right: 0;
		left: 0;
	}
	&:hover {
		opacity: 1;
		visibility: visible;
	}
	a {
		position: relative;
		--fs: 15;
		display: flex;
		gap: 10px;
		padding: 10px 15px;
		z-index: 1;
		&::before {
			background: linear-gradient(to right, var(--color-theme-1), var(--color-theme-1)) no-repeat 100% 100% / 0 100%;
			bottom: 0;
			content: "";
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			transition: background-size var(--ts);
			z-index: -1;
		}
		&:hover::before {
			background-position: 0 100%;
			background-size: 100% 100%;
		}
	}
	a[target="_blank"]::after {
		content: "";
		display: inline-block;
		--mask: url(img/icon-divide.svg) no-repeat center / contain;
		aspect-ratio: 1;
		background: currentColor;
		display: inline-block;
		height: auto;
		-webkit-mask: var(--mask);
		mask: var(--mask);
		width: 12px;
	}
}

@media (max-width: 767px) {
	.header-item:has(+ .header-sub-menu) {
		padding-bottom: 0;
	}
	.header-sub-menu {
		position: relative;
		width: 100%;
		border: none;
		margin-top: 0;
		opacity: 1;
		visibility: visible;
	}
}