@charset "UTF-8";

/* * {
	outline: 1px solid red !important;
} */

:root {
	--vh: 1vh;
}

@supports (height: 100dvh) {
	:root {
		--vh: 1dvh;
	}
}

html {
	height: calc(var(--vh) * 100);
}

@media (orientation: landscape) {
	:root {
		font-size: clamp(12px, 12px + 0.4vw, 24px);
	}
}

@media (orientation: portrait) {
	:root {
		font-size: clamp(10px, 4vw, 30px);
	}
}

:root {
	--color-main: #FF0;
	--color-main-sub: #F55;
	--color-accent: 0, 161, 230;
	--color-accent-sub: 86, 204, 255;
	--color-bg-main: 245, 250, 255, 1.0;
	--color-bg-main-sub: 245, 250, 255;
	--color-stroke: 19, 20, 25;
	--color-stroke-sub: #DDD;
	--color-gray: #e8ecef;
	--color-gray-sub: rgba(var(--color-stroke), var(--opacity-s));
	--text-muted: #6b7280;
	--transition-s: 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
	--transition-m: 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
	--transition-l: 900ms cubic-bezier(0.215, 0.61, 0.355, 1);
	--font-sans-jp: "Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Noto Sans JP",
		sans-serif;
	;
	--font-sans-en: "Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Noto Sans JP",
		sans-serif;
	--font-serif-jp: YakuHanMP, 'Shippori Mincho';
	--font-serif-en: YakuHanMP, 'Shippori Mincho';
	--font-mono-jp: 'IBM Plex Mono';
	--font-mono-en: 'IBM Plex Mono';
	--font-size-dynamic: calc(var(--font-size-l) + 1vw);
	--font-size-xxl: 3rem;
	--font-size-xl: 1.5rem;
	--font-size-l: 1.25rem;
	--font-size-m: 1rem;
	--font-size-s: 0.75rem;
	--font-size-xs: 0.5rem;
	--space-xxs: 0.1rem;
	--space-xs: 0.25rem;
	--space-s: 0.5rem;
	--space-m: 1rem;
	--space-l: 1.5rem;
	--space-xl: 2rem;
	--space-xxl: 3rem;
	--gap-xl: 8rem;
	--gap-l: 4rem;
	--gap-m: 2rem;
	--gap-s: 1rem;
	--opacity-xs: 0.1;
	--opacity-s: 0.25;
	--opacity-m: 0.5;
	--opacity-l: 0.75;
	--guide-line-color: rgba(var(--color-stroke), var(--opacity-xs));
	--guide-line-width: 1px;
}

html {
	font-size: 62.5%;
}

/* ローディング中はスクロールさせない */
body.is-loading {
	overflow: hidden;
}

#content {
	transform: translateY(20px);
}



body {
	background-color: rgba(var(--color-bg-main));
	color: rgba(var(--color-stroke), 1.0);
	font-family: var(--font-sans-jp);
	font-size: 1rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.7;
	font-feature-settings: "palt";
	letter-spacing: 0.02em;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	text-rendering: geometricPrecision;
	text-decoration-thickness: 1px;
	-webkit-tap-highlight-color: rgba(var(--color-stroke), var(--opacity-xs));
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
	overflow-y: scroll;
	overscroll-behavior: none;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: justify;
	text-align-last: left;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	--line-width: 1px;
	--line-color: rgba(var(--color-stroke), var(--opacity-xs));
	background:
		linear-gradient(90deg, transparent calc(var(--font-size-dynamic) - var(--line-width) / 2), var(--line-color) 0, var(--line-color) calc(var(--font-size-dynamic) + var(--line-width) / 2), transparent 0),
		linear-gradient(90deg, transparent calc(50% - var(--line-width) / 2), var(--line-color) 0, var(--line-color) calc(50% + var(--line-width) / 2), transparent 0),
		linear-gradient(90deg, transparent calc(100% - var(--font-size-dynamic) - var(--line-width) / 2), var(--line-color) 0, var(--line-color) calc(100% - var(--font-size-dynamic) + var(--line-width) / 2), transparent 0);
	background-repeat: no-repeat;
}

body.is-side-part::before {
	background:
		linear-gradient(90deg, transparent calc(var(--font-size-dynamic) - var(--line-width) / 2), var(--line-color) 0, var(--line-color) calc(var(--font-size-dynamic) + var(--line-width) / 2), transparent 0),
		linear-gradient(90deg,
			transparent calc((100% - var(--font-size-dynamic) * 2) * 0.3 + var(--font-size-dynamic) - var(--line-width) / 2),
			var(--line-color) 0,
			var(--line-color) calc((100% - var(--font-size-dynamic) * 2) * 0.3 + var(--font-size-dynamic) + var(--line-width) / 2),
			transparent 0),
		linear-gradient(90deg, transparent calc(100% - var(--font-size-dynamic) - var(--line-width) / 2), var(--line-color) 0, var(--line-color) calc(100% - var(--font-size-dynamic) + var(--line-width) / 2), transparent 0);
}


body.is-side-part-70::before {
	background:
		linear-gradient(90deg, transparent calc(var(--font-size-dynamic) - var(--line-width) / 2), var(--line-color) 0, var(--line-color) calc(var(--font-size-dynamic) + var(--line-width) / 2), transparent 0),
		linear-gradient(90deg, transparent calc((100% - var(--font-size-dynamic) * 2) * 0.7 + var(--font-size-dynamic) - var(--line-width) / 2), var(--line-color) 0, var(--line-color) calc((100% - var(--font-size-dynamic) * 2) * 0.7 + var(--font-size-dynamic) + var(--line-width) / 2), transparent 0),
		linear-gradient(90deg, transparent calc(100% - var(--font-size-dynamic) - var(--line-width) / 2), var(--line-color) 0, var(--line-color) calc(100% - var(--font-size-dynamic) + var(--line-width) / 2), transparent 0);
}



/* 背景アニメーション */
/* 背景アニメーション */
/* 背景アニメーション */
.bg-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: calc(var(--vh, 1vh) * 100);
	z-index: 1;
	overflow: hidden;
}

.circle {
	position: absolute;
	border-radius: 50%;
	opacity: 1;
	filter: blur(100px);
	will-change: transform;
}

.c1 {
	width: 50vw;
	height: 50vw;
	background: #DDD;
	top: -10%;
	left: -5%;
}

.c2 {
	width: 50vw;
	height: 50vw;
	background: #FDFFE7;
	bottom: -15%;
	right: -5%;
}

.c3 {
	width: 50vw;
	height: 50vw;
	background: #fffcfc;
	top: 30%;
	left: 40%;
}

@media (orientation: portrait) {
	body::before {
		content: none;
	}
}

span {
	display: inline-block;
}

svg {
	fill: currentColor;
	transition: fill var(--transition-hover);
	vector-effect: non-scaling-stroke !important;
}

summary {
	width: fit-content;
	margin-left: auto;
	cursor: pointer;
}

.parts_blur {
	background-color: rgba(var(--color-bg-main-sub), 0.7);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

hr {
	width: 100%;
	display: block;
	height: 1px;
	border: 0;
	margin: 0;
	background: rgba(var(--color-stroke), var(--opacity-xs));
}

.shippori-mincho-regular {
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

.ibm-plex-mono-regular {
	font-family: "IBM Plex Mono", monospace;
	font-weight: 400;
	font-style: normal;
}

.biz-udpgothic-regular {
	font-family: "BIZ UDPGothic", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.biz-udpgothic-bold {
	font-family: "BIZ UDPGothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}


.google-sans-flex-base {
	font-family: "Google Sans Flex", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings:
		"slnt" 0,
		"wdth" 100,
		"GRAD" 0,
		"ROND" 0;
}


/* --- layout --- */
/* --- layout --- */
/* --- layout --- */
header,
main,
footer {
	width: 100%;
}

section {
	position: relative;
	margin-bottom: calc(var(--font-size-dynamic) + 6vh);
}

section:last-child {
	margin-bottom: 0;
}

#about {
	padding-top: 100vh;
	z-index: 2;
	position: relative;
}

#subpage-header {
	margin-top: 50vh;
	margin-bottom: 0;
}

#subpage-top-section {
	background-color: rgba(var(--color-bg-main-sub), 0.7);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	padding-top: calc(var(--font-size-dynamic) + 6vh);
}

.inner {
	display: flex;
	flex-direction: column;
	padding: calc(var(--font-size-dynamic) + 10vh) var(--font-size-dynamic);
}


.section--accent .inner {
	background-color: rgba(var(--color-accent), 0.9);
	color: rgba(var(--color-bg-main));
}

.section--accent .btn-cssbuttons {
	background: rgba(var(--color-bg-main));
	color: rgba(var(--color-accent), 1.0);
}

.section--accent h2 {
	background-color: rgba(var(--color-bg-main));
	color: rgba(var(--color-accent), 1.0);
}

.section--accent .h3-featured-text,
.section--accent .h3-featured-text::before {
	color: rgba(var(--color-bg-main));
}


.horizontally {
	align-items: flex-end;
}

@media (orientation: portrait) {

	.inner {
		padding: var(--gap-m) 0;
	}

	.order1 {
		order: 1;
	}
}

/* --- marquee --- */
/* --- marquee --- */
/* --- marquee --- */

.marquee-container {
	width: 100%;
	overflow: hidden;
	padding: var(--font-size-dynamic);
	display: flex;
	border-top: var(--guide-line-width) solid var(--guide-line-color);
}

.marquee-inner {
	display: flex;
	flex-wrap: nowrap;
	will-change: transform;
}

.marquee-item {
	font-size: calc(var(--font-size-xxl) + 8vw);
	font-family: var(--font-serif-jp), serif;
	font-weight: 400;
	color: var(--color-gray-sub);
	white-space: nowrap;
	padding-right: 2rem;
	text-transform: uppercase;
}

@media (orientation: portrait) {
	.marquee-item {
		font-size: calc(var(--font-size-xxl) + 4vw);
	}
}


/* --- button --- */
/* --- button --- */
/* --- button --- */

.btn-cssbuttons-wrapper {
	margin-left: auto;
	width: fit-content;
}

.btn-cssbuttons {
	position: relative;
	display: inline-grid;
	place-items: center;
	padding: 1rem 2rem;
	min-width: 15rem;
	overflow: hidden;
	background: rgba(var(--color-accent), 1.0);
	color: rgba(var(--color-bg-main));
	text-decoration: none;
	transition: var(--transition-s);
	cursor: pointer;
}

.text-normal,
.text-hover {
	grid-area: 1 / 1;
	transition: var(--transition-s);
}

.text-hover {
	opacity: 0;
	transform: translateY(4rem);
	pointer-events: none;
}

.btn-cssbuttons:hover .text-normal {
	opacity: 0;
	transform: translateY(-4rem);
}

.btn-cssbuttons:hover .text-hover {
	opacity: 1;
	transform: translateY(0);
	transform: translateY(2px);
}

.btn-cssbuttons:hover {
	transition: var(--transition-s);
	box-shadow: 0 0 1rem var(--color-gray-sub);
	transform: translateY(-3px);
}

/* --- header --- */
/* --- header --- */
/* --- header --- */
header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: fixed;
	top: 0;
	z-index: 100;
}

header h1 {
	padding: var(--font-size-dynamic);
	width: clamp(120px, 30vw, 220px);
	height: auto;
}

@media (orientation: portrait) {
	header h1 {
		padding: var(--space-m);
	}
}

header nav {
	margin: var(--font-size-dynamic);
}

header nav ul {
	display: flex;
	gap: var(--gap-m);
	padding: 1rem 2rem;
}

header nav ul li {
	font-size: var(--font-size-s);
}

header nav ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-s);
}

.en {
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--space-xxs);
	color: rgba(var(--color-accent), 1);
}

.jp {
	letter-spacing: var(--space-xs);
}

.overlay {
	display: none;
}

.only-is-active {
	display: none;
}

@media (orientation: portrait) {
	header {
		background: transparent;
		box-shadow: none;
	}

	header nav {
		margin: 0 auto;
	}

	header nav ul {
		flex-direction: column;
		flex-direction: column;
		padding: 2rem 2rem;
		gap: var(--gap-s);
	}

	header nav ul li a {
		width: fit-content;
		padding: 1rem;
		align-items: flex-start;

	}

	.nav-wrapper {
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		height: calc(var(--vh) * 100);
		transition: var(--transition-m);
		z-index: 100;
		overflow-y: auto;
		overscroll-behavior: none;
		background-color: rgba(var(--color-bg-main-sub), 0.9);
	}

	.nav-wrapper.is-active {
		right: 0;
	}

	.overlay.is-active {
		display: block;
	}

	.is-active .only-is-active {
		display: block;
	}

	.menu-trigger {
		position: absolute;
		top: 2rem;
		right: 2rem;
		width: 3rem;
		height: 1.5rem;
		background: none;
		border: none;
		cursor: pointer;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0;
	}

	.menu-trigger span {
		display: block;
		position: relative;
		width: 100%;
		height: 1px;
		border-radius: 2px;
		background-color: rgba(var(--color-accent), 0.5);
		transition: var(--transition-s);
	}

	.menu-trigger.is-active span:nth-of-type(1) {
		transform: translateY(0.7rem) rotate(45deg);
	}

	.menu-trigger.is-active span:nth-of-type(2) {
		opacity: 0;
	}

	.menu-trigger.is-active span:nth-of-type(3) {
		transform: translateY(-0.7rem) rotate(-45deg);
	}
}

/* --- Hero --- */
/* --- Hero --- */
/* --- Hero --- */
.hero,
.hero-overlay,
.mv_hgroup,
.hero-blur-layer {
	will-change: filter, opacity, transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.hero {
	position: fixed;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: calc(var(--vh) * 100);
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
	padding: var(--space-s);
	background-color: rgba(var(--color-bg-main-sub), 0);
}

.hero,
.swiper {
	width: 100%;
	height: 100%;
}

.hero,
.swiper-slide {
	background-size: cover;
	background-position: center;
}

.hero-sub {
	top: 0;
	height: calc(var(--vh) * 100);
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(var(--color-bg-main-sub), 1.0);
	opacity: 0;
	z-index: 5;
	pointer-events: none;
}

.hero-blur-layer {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	will-change: backdrop-filter;
}

.mv_hgroup {
	position: absolute;
	bottom: calc(var(--gap-xl) + 10vh);
	left: 0;
	z-index: 10;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap-s);
}

.mv_span {
	width: max-content;
	display: inline-flex;
	flex-direction: column;
	gap: var(--gap-s);
	font-size: calc(var(--font-size-l) + 3vw);
	font-family: var(--font-serif-jp);
	font-weight: 400;
	letter-spacing: -0.1em;
	transform: skewX(-10deg);
}

.mv_span span {
	display: block;
}

.mv_p {
	display: inline-block;
	font-size: var(--font-size-m);
	padding: var(--space-s) var(--space-s);
	width: max-content;
	font-weight: 700;
}

@media (orientation: portrait) {
	.mv_p {
		font-size: var(--font-size-s);
	}
}

/* --- セクション・見出し --- */
h2,
.span_h2 {
	position: relative;
	font-size: var(--font-size-xl);
	width: max-content;
	padding: var(--space-xs) var(--space-xxs);
	background-color: rgba(var(--color-stroke), 1.0);
	color: rgba(var(--color-bg-main));
	line-height: 1.3;
	letter-spacing: initial;
	font-family: var(--font-serif-jp);
	font-weight: 400;
}

.section-title {
	width: 100%;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	margin-bottom: var(--gap-l);
}

.section-subtitle {
	top: -8rem;
	left: -2rem;
	font-family: var(--font-serif-jp), serif;
	font-size: calc(var(--font-size-xl) + 6vw);
	line-height: 1;
}


.h3-featured-text {
	width: calc(100% - 1rem);
	font-family: var(--font-serif-jp);
	font-size: calc(var(--font-size-xl) + 1vw);
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: -0.1em;
	text-align: left;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	row-gap: 1rem;
	transform: skewX(-10deg);
	margin-bottom: 2rem;
}

.h3-featured-text::before {
	content: ">";
	grid-column: 1;
	text-box-trim: trim-both;
	transform: skewX(10deg);
}

.h3-featured-text span {
	grid-column: 2;
	display: inline;
}

.h3-featured-text span:nth-of-type(2) {
	padding-left: 0.5rem;
}

.h3-featured-text-sub {
	font-size: var(--font-size-s);
	letter-spacing: 0.1em;
	color: rgba(var(--color-stroke), 0.5);
}

.section-content {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}

/* 
  1. .innerの中に .section-content が2つ以上あるかチェック
  2. 条件に合う場合のみ、最後の要素 (:last-of-type) 以外の要素に適用
*/
.inner:has(.section-content:nth-of-type(2)) .section-content:not(:last-of-type) {
	margin-bottom: calc(var(--font-size-dynamic) + 10vh);
}

.section-content-read {
	display: flex;
	flex: 1;
	gap: calc(var(--font-size-dynamic) + 2vh);
	flex-direction: column;
	container-type: inline-size;
}

@media (orientation: portrait) {

	.section-content-read {
		width: 100%;
		gap: calc(var(--font-size-dynamic) + 2vh);
	}
}

.section-content-figure {
	flex: 1;
	margin: 0;
	width: 100%;
}

.img-wrapper {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
	border-top: var(--guide-line-width) solid var(--guide-line-color);
	border-bottom: var(--guide-line-width) solid var(--guide-line-color);
}

.img-wrapper-sub {
	aspect-ratio: 3 / 1;
}

figure:has(.img-wrapper-sub) {
	position: sticky;
	top: var(--font-size-dynamic);
}

@media (orientation: portrait) {
	.img-wrapper {
		width: calc(100% - var(--font-size-dynamic));
		width: auto;
	}

	.section-content:nth-of-type(odd) .img-wrapper {
		margin-left: var(--font-size-dynamic);
		border-left: var(--guide-line-width) solid var(--guide-line-color);
	}

	.section-content:nth-of-type(even) .img-wrapper {
		margin-right: var(--font-size-dynamic);
		border-right: var(--guide-line-width) solid var(--guide-line-color);
	}
}

.img-wrapper img {
	width: 100%;
	height: 120%;
	object-fit: cover;
	position: absolute;
	top: -20%;
	left: 0;
	will-change: transform;
}

figcaption {
	font-size: var(--font-size-s);
	width: fit-content;
}

@media (orientation: portrait) {

	.section-content:nth-of-type(odd) figcaption {
		margin-left: auto;
		margin-right: var(--space-xxs);
	}

	.section-content:nth-of-type(even) figcaption {
		margin-right: auto;
		margin-left: var(--space-xxs);
	}
}

.section-column-content {
	container-type: inline-size;
	width: 100%;
	display: flex;
	gap: var(--gap-m);
	padding: 0 var(--font-size-dynamic);
}

.section-column-content-item {
	flex: 1;
}

@media (orientation: portrait) {
	.section-column-content-item:first-of-type>p {
		padding-left: 0;
	}
}

.section-column-content-item p {
	vertical-align: top;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	display: inline-block;
	width: 100%;
}

.section-content p {
	flex: 1;
}

.section-content-read p {
	break-inside: avoid;
}

.section-content-read p:not(:last-of-type) {
	margin-bottom: 1.5rem;
}

@media (orientation: portrait) {
	.section-content {
		flex-direction: column;
		gap: var(--gap-m);
	}

	.section-column-content {
		flex-direction: column;
		gap: 0;
		padding: 0 var(--font-size-dynamic);
	}

	.section-content-read,
	.section-content>* {
		max-width: 100%;
	}

	.section-content-read p {
		margin-bottom: 2rem;
	}

	.portrait__order1 {
		order: 1;
	}
}



@container (max-width: 420px) {
	.section-column-content {
		flex-direction: column;
		gap: 0;
	}
}

#company,
#service,
#recruit {

	.inner {
		gap: var(--font-size-dynamic);
	}

	.mv_hgroup {
		top: 20vh;
	}


	@media (orientation: portrait) {
		.section-content {
			grid-template-columns: 1fr;
		}
	}

	.cool-list {
		display: flex;
		flex-direction: column;
		margin-top: var(--font-size-dynamic);

		li {
			border-right: none;
			border-bottom: none;
		}

	}

	.list-title {
		border-bottom: var(--guide-line-width) solid var(--guide-line-color);
	}

	.list-body,
	.dl-body {
		padding-left: 1rem;
		margin-bottom: 1rem;

		ul,
		li {
			padding: 0;
			border: none;
		}

		li,
		dt,
		dd {
			list-style-type: decimal;
			list-style-position: inside;
			text-box-trim: none;
		}

		li::marker {
			color: rgba(var(--color-stroke), 0.5);
			font-size: var(--font-size-s);
		}

		dt {
			font-size: var(--font-size-s);
			font-weight: 700;
			margin-bottom: var(--font-size-xs);
		}
	}

	.dl-body {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	.list-body span {
		display: block;
		padding: 1rem;
	}

	.list-body ul {
		margin-bottom: 1rem;
	}

	.list-body li {
		list-style: none;
	}
}

#company {
	#subpage-top-section .section-column-content-item ul:nth-of-type(1) {
		list-style: none;
		padding-left: 0;
		margin: 1rem 0 2rem;
	}

	#subpage-top-section .section-column-content-item ul:nth-of-type(1) li {
		position: relative;
		padding: 1rem;
		font-weight: 700;
	}

	#subpage-top-section .section-column-content-item ul:nth-of-type(1) li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 4px;
		height: 4px;
		background-color: rgba(var(--color-accent), 1.0);
		border-radius: 2px;
	}

	#subpage-top-section .section-column-content-item ul:nth-of-type(2) {
		margin: 2rem auto 3rem;
		max-width: 400px;
	}

	#subpage-top-section .section-column-content-item ul:nth-of-type(2) li {
		position: relative;
		display: flex;
		padding: 1rem;
		margin-bottom: 1rem;
		font-size: var(--font-size-xl);
		letter-spacing: 0.1em;
		color: rgba(var(--color-accent), 1.0);
		background-color: #FFF;
		justify-content: center;
		align-items: center;
	}

	#subpage-top-section .section-column-content-item>span:last-of-type {
		display: block;
		text-align: right;
		margin-top: 2rem;
		line-height: 2;
		letter-spacing: 0.05em;
	}

	#subpage-top-section .section-column-content-item>span:last-of-type::first-line {
		font-size: 1rem;
	}

	.sticky {
		position: sticky;
		top: 0;
	}

	.img-wrapper img {
		top: 0%;
	}

	.list-subtext {
		font-size: 0.85em;
		display: block;
	}

	.dl-body ul {
		margin-bottom: 1rem;
	}

	.dl-body li {
		position: relative;
		list-style: none;
		padding: 0.5rem;
	}

	.dl-body li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 4px;
		height: 4px;
		background-color: rgba(var(--color-accent), 1.0);
		border-radius: 2px;
	}

}

#service {
	.listitems ul {
		list-style: none;
		padding-left: 0;
		margin: 1rem 0 2rem;
	}

	.listitems ul li {
		position: relative;
		padding: 1rem;
		font-weight: 700;
	}

	.listitems ul li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 4px;
		height: 4px;
		background-color: rgba(var(--color-accent), 1.0);
		border-radius: 2px;
	}

	.listitems>span:last-of-type {
		display: block;
		text-align: right;
		margin-top: 2rem;
		line-height: 2;
		letter-spacing: 0.05em;
	}

	.listitems>span:last-of-type::first-line {
		font-size: 1rem;
	}

	.dl-body dt {
		min-width: 2em;
		display: flex;
		justify-content: flex-end;
	}

}

/* --- cool-list --- */

.cool-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

.cool-list li {
	position: relative;
	border-bottom: var(--guide-line-width) solid var(--guide-line-color);
	box-sizing: border-box;
	padding: var(--font-size-dynamic) 0;
}

.cool-list li:nth-child(odd) {
	padding-left: 0;
}


.cool-list li:nth-child(odd) {
	border-right: var(--guide-line-width) solid var(--guide-line-color);
}

.cool-list li:nth-child(n+3) {
	border-bottom: none;
}

.list-num span {
	position: absolute;
	top: 0rem;
	left: 0rem;
	color: rgba(var(--color-stroke), 0.1);
	z-index: 1;
	font-family: var(--font-serif-jp);
	font-size: calc(var(--font-size-dynamic) + 2vw);
}

@media (orientation: portrait) {
	.list-num span {
		font-size: calc(var(--font-size-dynamic) + 6vw);
	}
}

.list-title,
.list-body {
	position: relative;
	z-index: 2;
}

.list-title {
	margin-bottom: 1rem;
	font-size: var(--font-size-s);
}

@container (max-width: 599px) {
	.cool-list {
		grid-template-columns: 1fr;
		gap: var(--font-size-dynamic);
	}

	.cool-list li {
		padding: 0;
		padding-bottom: var(--font-size-dynamic);
	}

	.cool-list li:nth-child(odd) {
		border-right: none;
	}
}

@media (orientation: portrait) {
	.cool-list {
		grid-template-columns: 1fr;
		gap: var(--font-size-dynamic);
	}

	.cool-list li {
		padding-bottom: var(--font-size-dynamic);
	}

	.cool-list li:nth-child(odd) {
		border-right: none;
	}
}

/* --- News --- */

.news-visual-area {
	width: 40%;
	margin: 10%;
	margin-right: auto;
}

#newsWrap {
	width: 50%;
}

@media (orientation: portrait) {
	.news-visual-area {
		display: none;
	}

	#newsWrap {
		width: 100%;
	}
}

#newsList {
	list-style: none;
	padding: 0;
	margin-bottom: var(--font-size-dynamic);
}

#newsList li {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border-bottom: var(--guide-line-width) solid var(--guide-line-color);
	padding: var(--font-size-dynamic);
	transition: background-color var(--transition-m);
}

#newsList li:has(a:hover) {
	background-color: rgba(var(--color-accent), 1);
}

span.up_ymd {
	font-size: var(--font-size-s);
	color: var(--color-gray-sub);
	letter-spacing: var(--space-xxs);
	font-weight: 700;
}

.news-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-m);
	text-decoration: none;
	color: inherit;
}

#newsList .news-link:hover,
#newsList li:has(.news-link:hover) .up_ymd {
	color: rgba(var(--color-bg-main));
}

.arrow {
	display: inline-block;
	align-self: flex-end;
	position: relative;
	padding-left: var(--font-size-m);
	margin-right: 0.1rem;
	font-size: var(--font-size-s);
}

.arrow::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid currentColor;
}

.pager {
	display: flex;
	gap: 2rem;
	margin-left: auto;
	width: fit-content;
	margin-right: var(--font-size-dynamic);
}


/* --- #news-detail --- */

#news-detail #newsWrap {
	width: 30%;
	height: 100%;
	font-size: var(--font-size-s);
	position: sticky;
	top: 0;
}

#newsWrap .section-title {
	padding-bottom: 0;
}

#news-detail .news-content-area {
	width: 70%;
	padding: 0 var(--font-size-dynamic);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--font-size-dynamic);
}

@media (orientation: portrait) {

	#news-detail #newsWrap {
		width: 100%;
		order: 1;
	}

	#news-detail .news-content-area {
		width: 100%;
	}
}

.news-section-layout {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
}

@media (orientation: portrait) {
	.news-section-layout {
		flex-direction: column;
	}
}

.news-detail-head {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--font-size-dynamic);
}

.news-detail-head h2 {
	width: 100%;
	background-color: initial;
	color: initial;
}

.backORcloseBtn,
#detail {
	width: 100%;
}

/* --- フッター --- */
address {
	font-style: normal;
}

footer {
	position: relative;
	padding-bottom: calc(var(--font-size-dynamic) + 1rem);
}

.site-footer {
	padding: 4rem var(--font-size-dynamic) 6rem;
	z-index: 9999;
	background-color: rgba(var(--color-bg-main));

}

.footer-container {
	margin: 0 auto;
	padding: 4rem 0;
}

.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4rem;
	flex-direction: column;
	gap: 4rem;
}

.footer-top .mv_span {
	font-size: calc(var(--font-size-xl) + 1vw);
	align-items: center;
	background-color: initial;
}


.footer-logo img {
	width: 200px;
}

.footer-nav {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--gap-l);
}

.nav-group h3 {
	font-size: var(--font-size-s);
	margin-bottom: var(--font-size-dynamic);
}

.nav-group ul {
	display: flex;
	gap: var(--gap-l);
	padding: 0;
}

@media (orientation: portrait) {
	.nav-group ul {
		flex-direction: column;
		gap: var(--gap-s);
	}
}

.nav-group .jp {
	letter-spacing: initial;
}

.nav-group a {
	text-decoration: none;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
}

.footer-info {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.footer-info span {
	font-size: var(--font-size-s);
}

.vertical-statement {
	position: fixed;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	font-family: var(--font-mono-en);
	font-size: var(--font-size-s);
	z-index: 9998;
	color: var(--color-gray-sub);
}

@media (orientation: portrait) {
	.vertical-statement {
		display: none;
	}

	.footer-info {
		flex-direction: column;
	}

}

.fixed-bottom-bar {
	font-size: var(--font-size-s);
}

.fixed-bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-m) var(--font-size-dynamic);
	z-index: 9999;
	border-top: var(--guide-line-width) solid var(--guide-line-color);
	background-color: rgba(var(--color-bg-main));
}

.fixed-bottom-bar ul {
	display: flex;
	flex: 1;
	list-style: none;
	gap: var(--gap-m);
	padding: 0;
}

.fixed-bottom-bar ul li a {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	align-items: center;
}

.fixed-bottom-bar .jp {
	letter-spacing: inherit;
}


/* サービス */

#service,
#recruit {
	.dl-body {
		padding-left: 0;
	}

	.dl-body div {
		display: flex;
		align-items: baseline;
		gap: 1rem;
		padding-left: 0;
	}

	.btn-cssbuttons-wrapper {
		margin-bottom: 1rem;
	}

	@media (orientation: portrait) {
		.btn-cssbuttons-wrapper {
			margin-bottom: 0;
		}
	}
}


/* コンタクト */

.form-group {
	margin-bottom: var(--font-size-dynamic);
}

.form-group label {
	display: block;
	margin-bottom: 1rem;
	font-weight: 700;
	font-size: var(--font-size-s);
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 1rem;
	border: var(--guide-line-width) solid var(--guide-line-color);
	border-radius: 2px;
	box-sizing: border-box;
}

#formWrap {
	flex: 1;
}

form.contact-form {
	margin-top: calc(var(--font-size-dynamic) + 2vh);
}

#formWrap .btn-cssbuttons-wrapper {
	margin: 0 auto;
}


/* プライバシーポリシー */

#privacy-policy {
	.policy-section {
		margin-bottom: 0;
		padding: var(--font-size-dynamic) 0;
	}

	.policy-section:last-of-type {
		border-bottom: none;

	}

	.policy-section p,
	address {
		padding: var(--font-size-dynamic) 0;
		padding-left: 1rem;
	}

	@media (orientation: portrait) {

		.policy-section p,
		address {
			padding: 0;

		}
	}

	.section-column-content {
		flex-direction: column;
		gap: 2rem;
	}

	@media (orientation: portrait) {
		.section-column-content {
			gap: 0;
		}
	}

	.policy-section h3 {
		margin-bottom: 1rem;
		color: initial;
		border-bottom: var(--guide-line-width) solid var(--guide-line-color);
		text-box-trim: initial;
		font-weight: 400;
	}

	.policy-section ul {
		padding-left: calc(var(--font-size-dynamic) + 1rem);
	}

	@media (orientation: portrait) {
		.policy-section ul {
			padding-left: 1rem;
		}
	}

	.policy-section li {
		text-box-trim: none;
		list-style: decimal;
	}

	.policy-section li::marker {
		color: rgba(var(--color-stroke), 0.5);
		font-size: var(--font-size-s);
	}

	@media (orientation: portrait) {
		.section-content-read p {
			margin-bottom: 0;
		}
	}
}



/* --- CTA --- */

#cta {
	h4 {
		margin-bottom: 1rem;
		color: initial;
		border-bottom: var(--guide-line-width) solid var(--guide-line-color);
		text-box-trim: initial;
		font-weight: 400;

	}

	.tel-number {
		font-size: var(--font-size-dynamic);
	}

	.cta-card-tel {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
	}

	@media (orientation: portrait) {
		.tel-number {
			display: block;
		}

		.cta-card-tel {
			flex-direction: column;
			align-items: flex-end;
		}

		section.cta-section {
			margin-bottom: 2rem;
		}
	}
}


/* NEWS詳細ページ */
.backORcloseBtn,
#detail {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2rem !important;

	.detailUpfile a {
		text-decoration: underline;
	}

	p {
		margin-bottom: 1rem;
	}
}

#detail * {
	font-size: inherit !important;
	line-height: inherit !important;
	text-box-trim: inherit !important;
}