@charset "UTF-8";

:root{
	--color-primary: #00A9E5;
	--color-primary-rgb: 0,169,229;
	--color-primary-light: #B6DEEC;
	--color-primary-light-rgb: 182,222,236;
	--color-secondary: #59B2DB;
	--color-secondary-rgb: 89,178,219;
	--color-contrast: #fff;
	--color-contrast-rgb: 255,255,255;
	--color-accent: #E96255;
	--color-accent-rgb: 233,98,85;
	--color-txt: #333;
	--color-txt-rgb: 51,51,51;
	--color-txt-gray: #9d9d9d;
	--color-txt-gray-rgb: 157,157,157;
	--color-link: #1a1a1a;
	--color-link-rgb: 26,26,26;
	--color-bg: #EAF3F8;
	--color-bg-rgb: 234,243,248;
	--color-bg-gray: #F9FAFA;
	--color-bg-gray-rgb: 249,250,250;
	--color-caution: #ef3f2f;
	--transition-default: all 0.4s ease;
	--ease-elastic-out: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
}


/* !foundation */
/* --------------------------- */
html,body {
	-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;
	-webkit-font-variant-ligatures:none;
	font-variant-ligatures:none;
}
body {
	color: var(--color-txt);
	background: var(--color-contrast);
	overflow-x: hidden;
	position: relative;
	text-align: center;
}
* {
	box-sizing: border-box;
}
a,
a img {
	color: var(--color-primary);
	transition: var(--transition-default);
}
a img {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
a:visited {
	color: rgba(var(--color-primary-rgb), .875);
}
a:hover {
	color: var(--color-accent);
	text-decoration: none;	
}
a:hover img {
	opacity: 0.6;
}
a.noborder {
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
hr {
	border: 0;
	height: 1px;
	background-image: linear-gradient(90deg, rgba(var(--color-tertiary-rgb),0) 0%, rgba(var(--color-tertiary-rgb),1) 50%, rgba(var(--color-tertiary-rgb),0) 100%);
	margin: 5rem auto;
	clear: both;
	mix-blend-mode: multiply;
}
.btn,
.btn:visited {
	width: fit-content;
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 0.625em 1.25em 0.75em;
	color: var(--color-contrast);
	background-color: var(--color-accent);
	border-radius: 100vmax;
}
.btn:hover {
	background-color: oklch(from var(--color-accent) calc(l + 0.075) c h);
	color: var(--color-contrast);
}
.btnMore {
	width: fit-content;
	margin-inline: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
	font-size: 1em;
	line-height: 1;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.03em;
	text-indent: 0.03em;
	position: relative;
	
	&::after {
		content: "";
		width: 3.125em;
		height: 3.125em;
		background: url('../imgs/icon_arrow.svg') center center no-repeat var(--color-contrast);
		background-size: 1.5em auto;
		border-radius: 0.625em;
		transition: translate 1.4s var(--ease-elastic-out);
	}
	&.bordered::after {
		box-shadow: 0 0 0 2px var(--color-primary);
	}
	&:hover::after {
		translate: 0.25em 0;
	}
}
label.btn {
	transition: var(--transition-default);
	cursor: pointer;
}

/* material
--------------------------- */
.clearFloat {
	clear: both;
}
.alignleft {
	float: left;
	margin: 0.375em 1.75em 1.75em 0;
}
.alignright {
	float: right;
	margin: 0.375em 0 1.75em 1.75em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0.375em auto;
	text-align: center!important;
}
.sp,
.checkEl,
.gNavBg {
	display: none;
}
.flexCont {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul[class],ol[class] {
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.tate {
	-webkit-font-feature-settings: 'palt' 0;
	font-feature-settings: 'palt' 0;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
/* !font */
/* --------------------------- */
.wf-noto-sans-r, body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.wf-noto-sans-b, h1, h2, h3, h4, h5, h6, strong {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.wf-roboto-bk {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
	"wdth" 100;
}


.txtSdw {
	text-shadow: 0 0 40px rgba(var(--color-accent-rgb),.9),0 0 30px rgba(var(--color-accent-rgb),.9),0 0 20px rgba(var(--color-accent-rgb),.9),0 0 10px rgba(var(--color-accent-rgb),.9);
}
.txtSdwMin {
	text-shadow: 0 0 20px rgba(var(--color-accent-rgb),.9),0 0 15px rgba(var(--color-accent-rgb),.9),0 0 10px rgba(var(--color-accent-rgb),.9),0 0 5px rgba(var(--color-accent-rgb),.9);
}
.capsS {
	font-size: 0.8em;
}
.capsL {
	font-size: 1.5em;
}
.shadow {
	filter: drop-shadow(0 0 20px rgba(var(--color-primary-rgb), .875));
}
/* !layout */
/* --------------------------- */
.content {
	padding: 6.75rem 0;
}
.inner {
	width: min(1310px, 90%);
	margin: 0 auto;
	padding-left: 100px;
}

/* !header */
/* --------------------------- */
.gHeader {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin: 1.5rem;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 3rem);
	background-color: var(--color-contrast);
	border-radius: 1.25rem;
	padding: 1.75rem 1.875rem 1.75rem 2.75rem;
	z-index: 1000;
}
.siteTitle {
	margin: auto auto auto 0;
	font-size: 1em;
	line-height: 1;
}
.gNav {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: flex-end;
	min-height: 4.5rem;
}
ul.gNavList {
	position: relative;
	font-size: 1em;
	line-height: 1;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto -1em 0 auto;
		
	li:not(:last-of-type) {
		border-right: dotted 1px var(--color-txt-gray);
	}
	a, a:visited {
		display: block;
		padding: 0.125em 1em;
		text-decoration: none;
		color: var(--color-txt);
		
		&:hover,
		.about ul.gNavList li:nth-of-type(2) &,
		.public-works ul.gNavList li:nth-of-type(3) &,
		.private-works ul.gNavList li:nth-of-type(4) &,
		.post-type-archive-works ul.gNavList li:nth-of-type(5) &,
		.category-topics ul.gNavList li:nth-of-type(6) &,
		.cat-topics ul.gNavList li:nth-of-type(6) &,
		.recruit ul.gNavList li:nth-of-type(7) &,
		.contact ul.gNavList li:nth-of-type(8) & {
			color: var(--color-primary);
		}
	}
	
	.gFooter & {
		margin: 0 auto 2.625em;
	}
}
ul.txtNav {
	font-size: 0.8125em;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2em;
	
	a, a:visited {
		display: block;
		text-decoration: none;
		color: var(--color-txt);
		
		&:hover {
			color: var(--color-primary);
		}
	}
	
	.gHeader & {
		margin: 0 0 auto auto;
	}
	
	.gFooter & {
		margin: 0 auto 5.25em;
	}
}

/* !footer */
/* --------------------------- */
.gFooter {
	background-color: var(--color-primary-light);
	border-radius: 2.5rem 2.5rem 0 0;
	padding: 4.5rem 1.5rem 3.25rem;
}
.footerTitle {
	margin: 0 auto 4.5rem;
	line-height: 1;
}
.copyright {
	font-size: 0.6875em;
	letter-spacing: 0.07em;
	text-indent: 0.07em;
}

.invisible {
	opacity: 0;
	translate: 0 3rem;
}
.visible {
	opacity: 1;
	transition: opacity 0.6s ease 0.2s, translate 0.6s ease;
	translate: 0 0;
}

/* !top */
/* --------------------------- */
.heroImg {
	position: relative;
	margin: 0 auto 8rem;
	border-radius: 0 0 2.5rem 2.5rem;
	overflow: hidden;
	
	video {
		width: 100%;
		height: auto;
		
		&.fadeOut {
			opacity: 0;
			transition: opacity 1.0s ease;
		}
	}
	
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: calc(100% - 2px);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: url('../imgs/hero_img_poster.jpg') center top no-repeat;
		background-size: 100% auto;
		transition: opacity 1.0s ease 10s;
		opacity: 0;
	}
	
	.loaded &::before {
		opacity: 1;
	}
}
.topIntro {
	margin: 0 auto 5.8125rem;
	padding: 0 5rem 4.75rem;
	background: url('../imgs/top_intro_bg.jpg') center bottom no-repeat;
	background-size: 100% auto;
	border-radius: 0 0 2.5rem 2.5rem;
}
.topIntroTitle {
	font-size: 6.25em;
	line-height: 1;
	margin: 0 auto 0.5em;
	
	.colored {
		color: var(--color-primary);
	}
}
.topIntroCatch {
	font-size: 1.875em;
	line-height: 1.6;
	font-weight: 500;
	margin: 0 auto 0.75em;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
}
.topIntroTxt {
	font-size: 1em;
	line-height: 2.0625;
	margin: 0 auto 16.625em;
}
.topIntroEn {
	font-size: 3em;
	line-height: 1.0875;
	margin: 0;
	text-align: right;
	color: var(--color-contrast);
	text-shadow: 0 0 4px rgba(0,0,0,.25);
	
	.capsL {
		font-size: 1.6875em;
	}
}
.topWorksBnrWrap {
	width: min(1310px, 90%);
	margin: 0 auto 5.75rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.875rem;
}
.topWorksBnr,
.topWorksBnr:visited {
	text-decoration: none;
	width: 100%;
	height: auto;
	aspect-ratio: 640 / 240;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	border-radius: 1.25rem;
	overflow: hidden;
	padding-right: 60%;
	color: var(--color-contrast);
	background-color: var(--color-accent);
	
	&.topWorksPrivate {
		background-color: var(--color-secondary);
	}
	
	&::before, &::after {
		content: "";
		display: block;
		width: 60%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
	}
	&::before {
		background: url('../imgs/top_works_public_bg.jpg') center center no-repeat;
		background-size: cover;
	}
	&.topWorksPrivate::before {
		background: url('../imgs/top_works_private_bg.jpg') center center no-repeat;
		background-size: cover;
	}
	&::after {
		background: rgba(0,0,0,.2);
		transition: background 0.4s ease;
	}
	&:hover {
		color: var(--color-contrast);
	}
	&:hover::after {
		background: rgba(0,0,0,0);
	}
	
	h3 {
		font-size: 0.9375em;
		line-height: 1.25;
		margin: 3em auto auto;
		
		.capsL {
			display: block;
			font-size: 1.875em;
			margin-top: 0.25em;
		}
		img {
			display: block;
			margin: 1.5em auto 0;
			
			.topWorksBnr:hover & {
				opacity: 1;
				scale: 1.1;
			}
		}
	}
	.btnMore {
		position: absolute;
		right: 1em;
		bottom: 0;
		z-index: 1000;
		color: var(--color-contrast);
		transition: translate 0.4s ease;
		
		.topWorksBnr:hover & {
			translate: 0.25em 0;
		}
	}
}
.topWorks {
	position: relative;
	padding-bottom: 2rem;
	
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: calc(100% + 10rem);
		background-color: var(--color-bg);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		border-radius: 2.5rem;
	}
	
	.btnMore {
		justify-content: flex-end;
	}
}
.topContTitle {
	font-size: 2.5em;
	line-height: 1.25;
	text-align: left;
	letter-spacing: 0.1em;
	margin: 0 auto 0.4em;
	
	&::before {
		content: "";
		display: block;
		width: 100px;
		height: 6px;
		background-color: var(--color-primary);
		margin-bottom: 1em;
	}
	
	.capsS {
		display: block;
		font-size: 0.5em;
		line-height: 1.2;
		letter-spacing: 0.03em;
		color: var(--color-primary);
		margin-top: 0.5em;
	}
}
.workcCatTitle {
	font-size: 2em;
	line-height: 1.25;
	letter-spacing: 0.1em;
	margin: 3em auto 1em;
	
	&::before {
		content: "";
		display: block;
		width: 100px;
		height: 6px;
		background-color: var(--color-primary);
		margin: 0 auto 1em;
	}
}
ul.topWorksList {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.875rem;
	margin: -7.5rem auto 2.75rem;
	
	li {
		&:first-child {
			grid-column: 2;
		}
		
		button {
			font-size: 0.8125em;
			line-height: 1.375;
			text-align: left;
			display: block;
			background-color: var(--color-contrast);
			padding: 1.25rem;
			border: none;
			outline: none;
			border-radius: 1.25rem;
			cursor: pointer;
			transition: box-shadow 2.0s var(--ease-elastic-out), color 0.4s ease;
			
			img {
				width: 100%;
				height: auto;
				aspect-ratio: 484 / 314;
				object-fit: cover;
				border-radius: 0.6125rem;
				margin-bottom: 0.5em;
				pointer-events: none;
			}
			
			&:hover {
				box-shadow: 0 4px 8px rgba(0,0,0,.15);
				color: var(--color-primary);
			}
			
			&:focus {
				outline: none;
			}
		}
	}
}
.worksModal {
	width: min(800px, 90%);
	max-height: 85lvh;
	overflow-y: auto;
	padding: 4rem;
	border-radius: 1.25rem;
	background-color: var(--color-contrast);
	box-shadow: 8px 8px 20px rgba(0,0,0,.25);
	border: none;
	display: none;
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.4s ease, transform 2.0s var(--ease-elastic-out), display 0.4s;
	transition-behavior: allow-discrete;
	
	&[open] {
		display: block;
		opacity: 1;
		transform: translateY(0);
		
		@starting-style {
			opacity: 0;
			transform: translateY(1rem);
		}
	}
	
	&::backdrop {
		background-color: rgba(0,0,0,.75);
		backdrop-filter: blur(8px);
	}
}
.worksSingle {
	width: min(800px, 90%);
	margin: 0 auto;
	padding: 4rem;
	border-radius: 1.25rem;
	background-color: var(--color-contrast);
	box-shadow: 8px 8px 20px rgba(0,0,0,.25);
}
.worksModalTitle {
	font-size: 1.75em;
	line-height: 1.25;
	text-align: left;
	font-weight: 500;
	margin: 0 0 1em;
}
.worksModalImg {
	width: 100%;
	border-radius: 1.25rem;
	overflow: hidden;
	
	img {
		width: 100%;
	}
}
.worksModalBody {
	font-size: 1em;
	line-height: 1.625;
	text-align: left;
}
.worksClose {
	cursor: pointer;
	background: none;
	border: none;
	position: absolute;
	top: 2.5rem;
	right: 2.5rem;
	width: 2.375rem;
	height: 2.375rem;
	
	&::before, &::after {
		content: "";
		width: 100%;
		height: 1px;
		background-color: var(--color-txt-gray);
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		rotate: 45deg;
		transition: background-color 0.4s ease;
	}
	
	&:hover::before, &:hover::after {
		background-color: var(--color-txt);
	}
	
	&::after {
		rotate: -45deg;
	}
	
	&:focus {
		outline: none;
	}
}
.topTopics {
	position: relative;
	
	&::before {
		content: "";
		display: block;
		width: 75vw;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: var(--color-bg-gray);
		z-index: -1;
		border-radius: 0 2.5rem 2.5rem 0;
	}
	
	.inner {
		position: relative;
	}
	
	.btnMore {
		position: absolute;
		top: 3rem;
		left: min(740px, 50vw);
	}
}
ul.topicsList {
	margin: 1.5em auto 0 0;
	width: min(800px, 55vw);
	border-top: solid 1px #c9c9c9;
	font-size: 1em;
	line-height: 1.375;
	text-align: left;
	font-weight: 500;
	
	li {
		position: relative;
		border-bottom: solid 1px #c9c9c9;
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 2em;
		padding: 1em 2.5em 1em 0;
		
		time {
			letter-spacing: 0.05em;
		}
		
		&::after {
			content: "";
			width: 1.5em;
			height: 1.5em;
			background: url('../imgs/icon_arrow.svg') center center no-repeat;
			background-size: cover;
			position: absolute;
			top: 50%;
			right: 0.5em;
			translate: 0 -50%;
			opacity: 0.5;
			transition: opacity 0.4s ease, transform var(--ease-elastic-out) 2.0s;
		}
		&:has(a:hover)::after {
			opacity: 1;
			transform: translateX(0.5em);
		}
		
		a {
			display: block;
			text-decoration: none;
			color: var(--color-txt);
			
			&:hover {
				color: var(--color-primary);
			}
		}
	}
}
.recruitBnr {
	width: min(900px, 90%);
	height: auto;
	aspect-ratio: 900 / 240;
	margin: 0 auto;
	border-radius: 1.25rem;
	overflow: hidden;
	text-align: left;
	
	.inner & {
		margin: 0 0 0 auto;
	}
	
	a, a:visited {
		padding-left: 4rem;
		color: var(--color-contrast);
		text-decoration: none;
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		
		&::before, &::after {
			content: "";
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 900 / 320;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;
		}
		&::before {
			background: url('../imgs/recruit_bnr_bg.jpg') center center no-repeat;
			background-size: 100% auto;
			transition: translate ease 0.4s;
		}
		&::after {
			background-color: rgba(0,0,0,.1);
			transition: background-color ease 0.4s;
		}
		
		&:hover {
			color: var(--color-primary);
			
			&::before {
				translate: 0 10%;
				transition: translate ease 1.0s;
			}
			&::after {
				background-color: rgba(0,0,0,0);
				transition: background-color ease 1.0s;
			}
		}
	}
	
	.btnMore {
		position: absolute;
		right: 1rem;
		bottom: 1rem;
		margin: 0;
		transition: color 0.4s ease;
		
		.recruitBnr:has(a:hover) & {
			color: var(--color-primary);
			
			&::after {
				translate: 0.25em 0;
			}
		}
	}
}
.recruitBnrTitle {
	font-size: 1.875em;
	line-height: 1.6;
	letter-spacing: 0.1em;
	margin: 0 0 1em;
}
.recruitBnrTxt {
	margin: 0;
	font-size: 1em;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.05em;
}

/* !lower */
/* --------------------------- */
.pageHeading {
	background: linear-gradient(180deg, #ACD6EA 35.17%, #76C1E3 100%);
	border-radius: 0 0 2.5rem 2.5rem;
	overflow: hidden;
	margin: 0 auto 6rem;
	padding: 14rem 0 0;
	color: var(--color-contrast);
	
	&:has(img) {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	img {
		width: 56.25%;
		border-radius: 2.5rem 0 2.5rem 0;
	}
}

.pageHeadingBody {
	min-width: 25%;
	margin: 0 auto;
	padding-top: 2.5rem;
	padding-bottom: 4.5rem;
	
	.pageHeading:has(img) & {
		text-align: left;
		padding-bottom: 0;
	}
	
	p {
		font-size: 1em;
		line-height: 1;
		color: var(--color-txt);
		margin: 0;
	}
}
.pageTitle {
	font-size: 1em;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin: 0 0 1.5em;
	
	.pageHeading:has(img) & {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 1.25em;
		margin: 0 0 2.75em;
		
		&::before {
			content: "";
			width: 1.25em;
			height: 2px;
			background-color: var(--color-contrast);
		}
	}
}
.pageCatch {
	font-size: 1.75em;
	line-height: 1.57;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin: 0 auto 2em;
	
	.pageHeading:has(img) & {
		margin-bottom: 0;
	}
}
.pageCont {
	width: min(1120px, 90%);
	margin: 0 auto 7.5rem;
	
	&.pageGrid {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 5.625rem;
	}
	
	&.privacyCont {
		width: min(900px, 85%);
		margin-bottom: 3rem;
	}
}
.pagePhoto {
	display: grid;
	gap: 2.5rem;
	
	img {
		border-radius: 1.25rem;
	}
}
.pageBody {
	
	p {
		font-size: 1em;
		line-height: 2.0625;
		text-align: justify;
		margin: 0 0 3em;
	}
}
.pageGallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	
	figure {
		margin: 0;
	}
	
	figcaption {
		font-size: 0.8125em;
		line-height: 1.375;
		text-align: left;
		font-weight: 500;
		margin: 1.25em 0 0;
	}
	
	img {
		border-radius: 1.25rem;
	}
}
ul.worksList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	margin: 0 auto 2.75rem;
	
	li {
		
		button {
			font-size: 0.8125em;
			line-height: 1.375;
			font-weight: 500;
			background-color: #fff;
			text-align: left;
			display: block;
			border: none;
			outline: none;
			cursor: pointer;
			transition: box-shadow 2.0s var(--ease-elastic-out), color 0.4s ease;
			
			img {
				width: 100%;
				height: auto;
				aspect-ratio: 484 / 314;
				object-fit: cover;
				border-radius: 1.25rem;
				margin-bottom: 1em;
				pointer-events: none;
			}
			
			&:hover {
				color: var(--color-primary);
			}
			
			&:focus {
				outline: none;
			}
		}
	}
}

.wp-pagenavi {
	margin: 4.5rem auto 4.5rem;
	font-size: 0.875em;
	line-height: 1;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75em;
	
	.page, .current, .previouspostslink, .nextpostslink {
		color: var(--color-txt-gray);
		border: solid 1px var(--color-txt-gray);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 2.875em;
		height: 2.875em;
		text-decoration: none;
		padding-bottom: 0.125em;
		border-radius: 0.25em;
		
		&:hover {
			border-color: var(--color-primary);
			background-color: var(--color-primary);
			color: var(--color-contrast);
		}
	}
	.current {
		background-color: var(--color-primary);
		color: var(--color-contrast);
	}
	.previouspostslink {
		margin-right: 1em;
	}
	.nextpostslink {
		margin-left: 1em;
	}
}

.accessMap {
	max-width: 100%;
	height: auto;
	aspect-ratio: 1120 / 650;
	margin: 0 auto 3.625rem;
}
.accessTitle {
	margin: 0 auto 1.375rem;
}
.accessTxt {
	font-size: 0.875em;
	line-height: 1;
	margin: 0 auto;
}

/* !sitemap */
/* --------------------------- */
ul.sitemapList {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
	width: fit-content;
	font-size: 1.25em;
	line-height: 1.25;
	text-align: left;
	margin: 0 auto 4.5rem;
	
	li {
		border-bottom: solid 1px rgba(var(--color-primary-rgb), .25);
		
		a {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 1em;
			padding: 1em 0.5em 1em 0.5em;
			text-decoration: none;
			
			&::after {
				content: "";
				width: 1.5rem;
				height: 1.5rem;
				background: url('../imgs/icon_arrow.svg') center center no-repeat;
				background-size: 1.5rem auto;
				transition: translate 1.4s var(--ease-elastic-out);
				margin-left: auto;
			}
			&:hover::after {
				translate: 0.2em 0;
			}
		}
	}
}

/* !company */
/* --------------------------- */
.companyCont {
	margin-top: -10.5rem;
	width: min(900px, 85%);
}
.companyImg {
	display: block;
	border-radius: 2.5rem;
	margin: 0 auto 1.5rem;
}
.companyOverview {
	width: min(700px, 100%);
	font-size: 1.125em;
	line-height: 1.5;
	font-weight: 500;
	text-align: left;
	margin: 0 auto 4.5em;
	display: grid;
	grid-template-columns: 12em 1fr;
	
	dt, dd {
		margin: 0;
		padding: 0.75em 1em;
		
		&:not(:last-of-type) {
			border-bottom: solid 1px #d9d9d9;
		}
	}
}
.companySubtitle {
	margin: 0 auto 1em;
	color: var(--color-primary);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	font-size: 1.875em;
	
	&::before, &::after {
		content: "";
		display: block;
		width: 3em;
		height: 1px;
		background-color: var(--color-primary);
	}
}
.companyGroupWrap {
	width: min(700px, 100%);
	margin-inline: auto;
	display: grid;
	grid-template-columns: auto auto;
	gap: 3rem;
}
.companyGroup {
	position: relative;
	font-size: 1em;
	line-height: 1.5;
	text-align: left;
	margin: 0;
	padding: 0 1rem;
	
	dt {
		font-size: 1.25em;
		font-weight: 700;
		margin: 0 0 0.5em;
	}
	
	&:last-of-type::before {
		content: "";
		display: block;
		width: 1px;
		height: 100%;
		background-color: var(--color-txt);
		position: absolute;
		top: 0;
		left: -1.5rem;
	}
	
	dd {
		margin: 0;
		
		ul {
			display: grid;
			grid-template-columns: auto auto;
			gap: 0 2.5em;
		}
	}
}

/* !privacy */
/* --------------------------- */
.privacyWrap {
	width: min(700px, 85vw);
	margin-inline: auto;
}
.privacyTxt {
	font-size: 1em;
	line-height: 2.0625;
	text-align: justify;
	margin: 0 0 1.5em;
	
	&.name {
		text-align: right;
	}
}


/* !contact */
/* --------------------------- */
.contactWrap {
	width: min(900px, 85%);
	margin: 0 auto 4.5rem;
}
.contactTel {
	margin: 0 auto 5.75rem;
	width: 100%;
	height: 7rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	border: solid 1px #d9d9d9;
	border-radius: 0.75rem;
	font-size: 1.25em;
	line-height: 1;
	font-weight: 500;
	color: var(--color-txt);
	text-decoration: none;
	
	b {
		font-size: 1.8em;
		font-weight: 700;
		color: var(--color-primary);
	}
	
	&:hover {
		color: var(--color-primary);
		background-color: rgba(var(--color-primary-rgb), .15);
	}
}
.contactForm {
	margin: 0 auto 4.5rem;
}
.formItem {
	display: grid;
	grid-template-columns: 14em 1fr;
	margin-bottom: 1rem;
	font-size: 1.125em;
	line-height: 1.375;
}
.formLabel {
	padding-top: 0.75em;
	position: relative;
	width: 100%;
	text-align: left;
	
	.required {
		position: absolute;
		top: 0;
		left: 0;
		translate: -200% 90%;
		display: block;
		margin-right: auto;
		font-size: 1.25em;
		line-height: 1;
		color: var(--color-caution);
	}
}
.formBody {
	text-align: left;
	
	input[type=text], input[type=email], input[type=tel], textarea {
		background-color: var(--color-bg-gray);
		border: solid 1px rgba(var(--color-txt-gray-rgb), .5);
		padding: 0.75em 0.75em 0.875em;
		border-radius: 0.625em;
		width: 100%;
		
		&.p-postal-code {
			width: 12em;
		}
	}
	
	textarea {
		height: 16em;
	}
	
	&.formGrid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
		
		input[type=text] {
			width: calc(100% - 2.25rem);
		}
	}
}
.formButtons button {
	outline: none;
	cursor: pointer;
	border: none;
}
.btnSubmit {
	outline: none;
	cursor: pointer;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5em;
	margin: 0 auto;
	padding: 1.25em 1.5em 1.375em 3em;
	letter-spacing: 0.03em;
	text-indent: 0.03em;
	background-color: var(--color-secondary);
	transition: background 0.4s ease;
	
	&:hover {
		background-color: var(--color-primary);
	}
	
	&::after {
		content: "";
		width: 1.5em;
		height: 1.5em;
		background: url('../imgs/icon_arrow_wh.svg') center center no-repeat;
		background-size: 100% auto;
		transition: translate 1.4s var(--ease-elastic-out);
	}
	
	&:hover::after {
		translate: 0.3em 0;
	}
}
.wpcf7-response-output {
	padding: 1em;
	border-radius: 0.5em;
}


.postWrap {
	width: min(900px, 85%);
	margin: 0 auto;
}
.postCont {
	margin: 0 auto 4.5rem;
}
.postDate {
	font-size: 1em;
	line-height: 1;
	text-align: left;
	display: block;
	margin: 0 0 1.5em;
	color: var(--color-primary);
}
.postTitle {
	font-size: 1.5em;
	line-height: 1.25;
	text-align: left;
	font-weight: 500;
	margin: 0 0 1.25em;
}
.postBody {
	position: relative;
	margin: 0 auto 3rem;
	line-height: 2.025;
	text-align: left;
	
	&::after {
		content: "";
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 966 / 3;
		background: url('../imgs/features_border.png') center center no-repeat;
		background-size: 100% auto;
		position: absolute;
		left: 0;
		bottom: 0;
	}
}
.postNav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	
	.gotoList {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
	}
	
	a[rel=next] {
		margin-left: auto;
	}
}

/* !recruit */
/* --------------------------- */
.recruitHeading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	height: 55.555vw;
	padding-left: 12.5vw;
	color: #5791B2;
	
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1440 / 975;
		background: url('../imgs/recruit_heading_bg.jpg') center top no-repeat;
		background-size: cover;
		border-radius: 0 0 2.5rem 2.5rem;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
.rectuitHeadingTitle {
	font-size: 3em;
	line-height: 1.5;
	text-align: left;
	margin: 0 0 0.375em;
}
.recruitHeadingTxt {
	font-size: 1em;
	line-height: 1.25;
	text-align: left;
	font-weight: 500;
	margin: 0;
}
.recruitMsg {
	width: min(840px, 85%);
	margin: 0 auto 7.5rem;
	padding: 4rem 1rem 2rem;
	background-color: rgba(var(--color-contrast-rgb), .9);
	border-radius: 1.875rem;
	box-shadow: 4px 4px 4px rgba(0,0,0,.15);
}
.recruitMsgTitle {
	font-size: 1.5em;
	line-height: 1.75;
	margin: 0 auto 1.5em;
	
	b {
		color: var(--color-primary);
		font-size: 1.175em;
	}
}
.recruitMsgTxt {
	font-size: 1em;
	line-height: 2.0625;
	margin: 0 0 1lh;
}
.recruitValue {
	width: min(1120px, 90vw);
	margin: 0 auto 11rem;
}
.recruitValueTitle {
	font-size: 6.25em;
	line-height: 1.05;
	margin: 0 auto 0.5em;
	
	.colored {
		color: var(--color-primary);
	}
	
	.capsS {
		color: var(--color-primary);
		font-size: 0.275em;
		display: block;
		margin-top: 1.5em;
	}
}
.recruitValueCatch {
	font-size: 1em;
	line-height: 2.0625;
	margin: 0 0 5em;
}
.recruitValueCont {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	margin-block: 5rem;
	
	img {
		border-radius: 1.25rem;
	}
}
.recruitValueContBody {
	border-left: solid 2px var(--color-primary);
	padding-left: 2.875rem;
	text-align: left;
}
.recruitValueContTitle {
	min-height: 3em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	font-size: 1.875em;
	line-height: 1.5666;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	margin: 0 0 0.5em;
	padding-left: 4.5em;
	
	span {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 3.333em;
		line-height: 1;
		letter-spacing: 0;
	}
}
.recruitContTxt {
	font-size: 1em;
	line-height: 2.0625;
	margin: 0;
}
.recruitTeam {
	background-color: var(--color-bg);
	border-radius: 2.5rem;
	padding: 7.5rem 0 12rem;
	margin: 0 auto 12rem;
}
.recruitTeamDetail {
	width: min(1120px, 85%);
	margin: 0 auto 5.625rem;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4.3125rem;
	
	img {
		border-radius: 1.25rem;
	}
}
.recruitTeamBody {
	text-align: left;
}
.recruitTeamJoin {
	font-size: 1.25em;
	line-height: 1;
	font-weight: 700;
	margin: 0 0 0.875em;
}
.recruitTeamName {
	font-size: 2em;
	line-height: 1;
	font-weight: 500;
	color: var(--color-primary);
	margin: 0 auto 1em;
}
.recruitJob {
	width: min(900px, 90%);
	margin: 0 auto 12rem;
}
.recruitJobTitle {
	font-size: 3.5em;
	line-height: 1;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	color: #4E4E4E;
	margin: 0 auto 1.5em;
}
.recruitJobCatch {
	font-size: 1.25em;
	line-height: 1;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 auto 1em;
}
ul.recruitJobBnr {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 3rem;
	margin: 1.5em auto 3em;
	font-size: 0.875em;
	line-height: 1;
	
	img {
		margin-bottom: 1em;
	}
	
	a {
		display: block;
		color: var(--color-txt);
		text-decoration: none;
		
		&:hover {
			color: var(--color-primary);
		}
	}
}
.recruitJobDetail {
	display: grid;
	grid-template-columns: 17em 1fr;
	font-size: 1em;
	line-height: 1.5;
	text-align: left;
	margin: 0 auto 3.5rem;
	border-top: solid 1px #d9d9d9;
	border-right: solid 1px #d9d9d9;
	
	dt, dd {
		margin: 0;
		padding: 0.625em 1.125em 0.875em;
		border-bottom: solid 1px #d9d9d9;
		border-left: solid 1px #d9d9d9;
		align-content: center;
	}
	dt {
		background-color: #d9d9d9;
		
		&:nth-of-type(even) {
			background-color: #c4c4c4;
		}
	}
	dd {
		background-color: #f9f9f9;
		
		&:nth-of-type(even) {
			background-color: #f5f5f5;
		}
	}
}

/* !sp */
/* --------------------------- */
@media screen and (max-width:768px) {
	/* !sp common */
	/* --------------------------- */
	.floatLeft,
	.floatRight,
	.alignleft,
	.alignright {
		display: block;
		text-align: center;
		float: none;
		margin: 16px auto;
	}
	.nosp {
		display: none;
	}
	.sp {
		display: block;
	}
	.flexCont {
		display: block;
	}
	.btnMore {
		
		
		&::after {
			width: 2.5em;
			height: 2.5em;
		}
	}
	/* !sp layout */
	/* --------------------------- */
	html {
		font-size: clamp(14px, 3.5vw, 18px);
	}
	main {
		max-width: 100vw;
		overflow-x: hidden;
		padding-bottom: 3rem;
	}
	.content {
		padding: 4rem 0;
	}
	.inner {
		padding: 0;
	}
	/* !sp header */
	/* --------------------------- */
	.gHeader {
		position: sticky;
		padding: 0;
		margin: 0;
		padding: 0;
		border-radius: 0;
		height: 3.5rem;
		align-items: center;
	}
	.siteTitle {
		margin: 0 auto;
		
		img {
			max-width: 75%;
		}
	}
	.toggle {
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 0.5rem;
		width: 3.5rem;
		height: 3.5rem;
		background-color: var(--color-primary);
		cursor: pointer;
		z-index: 2100;
		
		.lp & {
			display: none;
		}
	}
	.toggle .bar {
		width: 56%;
		height: 2%;
		background-color: var(--color-contrast);
		transition: scale 0.2s ease-in-out, rotate 0.2s ease-in-out;
		pointer-events: none;
	}
	#gNav:checked ~ .toggle .bar:nth-of-type(1) {
		rotate: 45deg;
		translate: 0 0.575rem;
	}
	#gNav:checked ~ .toggle .bar:nth-of-type(2) {
		scale: 0 1;
	}
	#gNav:checked ~ .toggle .bar:nth-of-type(3) {
		rotate: -45deg;
		translate: 0 -0.575rem;
	}
	.gNav {
		position: fixed;
		top: 3.5rem;
		left: 0;
		width: 100%;
		background: var(--color-contrast);
		z-index: 2100;
		overflow: hidden;
		translate: -10% 0;
		transition: translate 0.2s ease-in-out, opacity 0.2s ease-in-out;
		padding: 0.75rem 0 2rem;
		pointer-events: none;
		opacity: 0;
		box-shadow: 0 7px 14px rgba(var(--color-primary-rgb), .05);
		flex-direction: column;
	}
	#gNav:checked ~ .gHeader .gNav {
		translate: 0 0;
		pointer-events: auto;
		opacity: 1;
	}
	ul.gNavList {
		flex-direction: column;
		margin: 0 auto 1.5rem;
		font-size: 1.25rem;
		line-height: 1;
		text-align: center;
		letter-spacing: 0.01em;
		text-indent: 0.01em;
		gap: 0;
		
		li {
			width: 100%;
		}
		
		a {
			width: 100%;
			padding: 1.25em 1.5em;
		}
			
		li:not(:last-of-type) {
			border-right: none;
			border-bottom: dotted 1px var(--color-txt-gray);
		}
	}
	.gNavBg {
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(var(--color-link-rgb), .75);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease-in-out;
	}
	#gNav:checked ~ .gNavBg {
		pointer-events: auto;
		opacity: 1;
		transition: opacity 0.4s ease-in-out;
	}
	.gNav ul.txtNav {
		flex-direction: column;
		font-size: 0.875em;
		margin: 1.5rem auto 1.5rem;
	}
	/* !sp footer */
	/* --------------------------- */
	.gFooter {
		position: relative;
		padding: 2rem 1rem;
		z-index: 1100;
		
		ul.gNavList {
			width: fit-content;
				
			li:not(:last-of-type) {
				border-bottom-color: var(--color-contrast);
			}
		}
		
		ul.txtNav {
			font-size: 0.875em;
			margin: 0 auto 3em;
		}
	}
	.footerTitle {
		margin: 0 auto 2rem;
		
		img {
			max-width: 75%;
		}
	}
	
	/* !sp top */
	/* --------------------------- */
	.heroImg {
		height: 100vw;
		
		video {
			width: 100%;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}
		
		&::before {
			background-position: left -10vw center;
			background-size: auto 100%;
		}
	}
	.topIntro {
		padding: 0 1rem 2rem;
		background-size: auto 66%;
	}
	.topIntroTitle {
		font-size: 2.75em;
	}
	.topIntroCatch {
		font-size: 1.5em;
	}
	.topIntroTxt {
		line-height: 1.875;
		margin-bottom: 4.5em;
	}
	.topIntroEn {
		font-size: 2.5em;
	}
	.topWorksBnrWrap {
		grid-template-columns: 1fr;
	}
	.topWorksBnr,
	.topWorksBnr:visited {
		aspect-ratio: 640 / 280;
		
		h3 {
			font-size: 0.8125em;
			
			img {
				width: auto;
				height: 4.5em;
				margin-bottom: 2.5em;
			}
		}
	}
	ul.topWorksList {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
		margin-top: -9rem;
		margin-bottom: 1.5rem;
		
		li {
			button {
				padding: 1rem;
			}
		}
	}
	.worksModal {
		padding: 2rem;
	}
	.worksModalTitle {
		font-size: 1.5em;
		padding-right: 1em;
	}
	.worksClose {
		top: 1rem;
		right: 1rem;
	}
	.topTopics {
		width: 100%;
		margin-bottom: 3rem;
		
		&::before {
			width: 95vw;
		}
	}
	ul.topicsList {
		width: 95%;
	}
	.recruitBnr {
		margin: 0 auto 3rem;
		aspect-ratio: 900 / 400;
		
		a, a:visited {
			padding-left: 2rem;
			
			&::before, &::after {
				aspect-ratio: 900 / 400;
			}
			&::before {
				background-size: auto 100%;
			}
		}
		
		.inner & {
			width: 100%;
		}
	}
	.recruitBnrTitle {
		font-size: 1.375em;
	}
	.recruitBnrTxt {
		font-size: 0.75em;
		line-height: 1.5;
	}
	/* !sp lower */
	/* --------------------------- */
	.pageHeading {
		padding: 2.5rem 0 0;
		margin-bottom: 3rem;
		
		&:has(img) {
			flex-direction: column;
			gap: 3rem;
		}
		
		img {
			width: 100%;
			border-radius: 2.5rem;
		}
	}
	.pageCatch {
		margin: 0 0 1em;
	}
	.pageHeadingBody {
		padding-bottom: 3rem;
		
		p {
			font-size: 0.875em;
			line-height: 1.5;
		}
	}
	.pageCont {
		margin: 0 auto 3rem;
		
		&.pageGrid {
			grid-template-columns: 1fr;
			gap: 1.5rem;
		}
	}
	.pageGallery {
		width: 80%;
		margin-inline: auto;
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	ul.worksList {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
	.privacyTxt {
		font-size: 0.875em;
	}
	.accessMap {
		aspect-ratio: 1 / 1;
		margin-bottom: 1.5rem;
	}
	.accessTitle img {
		width: 66vw;
	}
	/* !sp company */
	/* --------------------------- */
	.companyCont {
		margin-top: -6.5rem;
	}
	.companyOverview {
		grid-template-columns: auto 1fr;
		font-size: 1em;
	}
	.companyGroupWrap {
		gap: 1rem;
		padding: 0;
	}
	.companyGroup {
		font-size: 0.8125em;
		
		dd {
			
			ul {
				grid-template-columns: 1fr;
				padding-left: 1.25em;
			}
		}
		
		&:last-of-type::before {
			left: -1rem;
		}
	}
	/* !sp contact */
	/* --------------------------- */
	.contactTel {
		flex-direction: column;
		height: auto;
		gap: 1rem;
		padding: 1rem 0;
		margin: 0 auto 3rem;
	}
	.formItem {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		font-size: 16px;
	}
	.formLabel {
		justify-content: start;
		text-align: left;
		gap: 0.5em;
		grid-template-columns: auto 1fr;
	}
	.formBody.formGrid input[type=text] {
		width: 100%;
	}
	ul.sitemapList {
		grid-template-columns: 1fr;
	}
	/* !sp recruit */
	/* --------------------------- */
	.recruitHeading {
		height: 66vw;
		padding-left: 5vw;
		justify-content: flex-start;
		
		&::before {
			aspect-ratio: 2.5 / 3;
		}
	}
	.rectuitHeadingTitle {
		margin-top: 1em;
		font-size: 2em;
	}
	.recruitHeadingTxt {
		line-height: 1.5;
	}
	.recruitMsg {
		padding: 2rem 1rem 2rem;
	}
	.recruitMsgTxt,
	.recruitContTxt {
		font-size: 0.875em;
		line-height: 1.875;
	}
	.recruitValueTitle {
		font-size: 3em;
		
		.capsS {
			font-size: 0.4125em;
		}
	}
	.recruitValueCont {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.recruitValueContBody {
		padding-left: 1.5rem;
	}
	.recruitValueContTitle {
		font-size: 1.5em;
	}
	.recruitTeam {
		padding: 3.75rem 0 1rem;
	}
	.recruitTeamDetail {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-block: 3rem 5rem;
	}
	.recruitJobTitle {
		font-size: 2.5em;
	}
	.recruitJobDetail {
		font-size: 0.875em;
		grid-template-columns: 7em 1fr;
	}
}