@charset "utf-8";

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,main,figure{margin:0;padding:0}table{font-size:100%;font-family:inherit}fieldset,img{border:0}img,svg,video{vertical-align:middle}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%}q:before,q:after{content:''}abbr,acronym{border:0}select,input,textarea{font-size:100%}header,footer,nav,main,section,article,figure,aside,picture{display:block}.clearfix:after,.row:after{content:"";display:table;clear:both}._fl{float:left}._fr{float:right}@media screen and (min-width: 744px),print{._pc_fl{float:left}._pc_fr{float:right}}@media screen and (max-width: 743px){._sp_fl{float:left}._sp_fr{float:right}}._tal{text-align:left!important}._tac{text-align:center!important}._tar{text-align:right!important}@media screen and (min-width: 744px),print{._pc_tal{text-align:left!important}._pc_tac{text-align:center!important}._pc_tar{text-align:right!important}}@media screen and (max-width: 743px){._sp_tal{text-align:left!important}._sp_tac{text-align:center!important}._sp_tar{text-align:right!important}}


/* 変数
====================================================================== */
:root {
	--color-base: #000;
	--color-white: #fff;
	--bg-base: #fff;
	--base-width: 1920;
	--sp-base-padding: 2.3rem;
	--font-family: "helvetica-lt-pro", "Arimo", Helvetica, Arial, sans-serif;
	--font-weight-reg: 400;
	--font-weight-medium: 500;
	--font-weight-semi: 600;
	--font-weight-bold: 700;
	--font-weight: var(--font-weight-reg);
	--transition-duration: .3s;
	--transition: var(--transition-duration) ease-in-out;
	@media screen and (max-width: 743px) {
		--base-width: 375;
	}
}

/* ========================================================
	template.css => テンプレート用CSS
======================================================== */
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	font-size: calc((10 / var(--base-width)) * 100vw);
}
html.no-scroll-behavior {
	scroll-behavior: auto;
}
body {
	background-color: var(--bg-base);
	font-size: 5rem;
	line-height: calc(85 / 50);
	color: var(--color-base);

	font-family: var(--font-family);
	font-weight: var(--font-weight);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
body {
	opacity: 1;
}
body.-page-single {
	opacity: 0;
	transition: opacity .1s linear;
}
body.-page-single.fade-in {
	animation: fadeIn 1s linear forwards;
}
body.is-leaving {
	opacity: 0;
	transition: opacity .1s linear;
}
* {
	letter-spacing: .01em;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media screen and (max-width: 743px) {
	body {
		font-size: 1.6rem;
		line-height: calc(25 / 16);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
:where(address,caption,cite,code,dfn,em,th,var) {
	font-style: normal;
	font-weight: var(--font-weight);
}
:where(h1,h2,h3,h4,h5,h6) {
	font-weight: var(--font-weight);
}
:where(img) {
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}
:where(iframe) {
	max-width: 100%;
	vertical-align: middle;
}
:where(sup) {
	vertical-align: super;
	font-size: 60%;
}
:where(table) {
	border-collapse: collapse;
	border-spacing: 0;
	line-height: inherit;
}
:where(a, a[data-modal]) {
	--a-color: var(--color-base);
	color: var(--a-color);
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: .06em;
	text-decoration-color: var(--a-color);
	text-underline-offset: .1em;
	outline: none;
	cursor: pointer;
}
:where(a[href]._a_reverse,._a_reverse a) {
	text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
}
@media (hover) {
	:where(a,button,._basic_trs,._hl),
	:where(a,button,._basic_trs,._hl)::before,
	:where(a,button,._basic_trs,._hl)::after {
		transition: color var(--transition), background var(--transition), border var(--transition), opacity var(--transition), text-decoration-color .2s ease-in-out;
	}
	:where(a svg, button svg) {
		transition: fill var(--transition);
	}
	:where(a[href]:hover, a[data-modal]:hover) {
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
	}
	:where(a[href]._a_reverse, a[data-modal]._a_reverse, ._a_reverse a[href], ._a_reverse a[data-modal]):hover {
		text-decoration-color: var(--a-color);
	}
	:where(a[href]._a_reverse.-hvw),
	:where(._a_reverse.-hvw a[href]) {
		text-decoration-color: rgba(255,255,255,0);
	}
	:where(a[href]._a_reverse.-hvw):hover,
	:where(._a_reverse.-hvw a[href]):hover {
		text-decoration-color: #fff;
	}
	:where(a[href]._a_reverse.-hvbk),
	:where(._a_reverse.-hvbk a[href]) {
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
	}
	:where(a[href]._a_reverse.-hvbk):hover,
	:where(._a_reverse.-hvbk a[href]):hover {
		text-decoration-color: var(--a-color);
	}
	:where(a[href] ._a_reverse) {
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-thickness: .06em;
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
		text-underline-offset: .1em;
	}
	:where(a[href] ._a_reverse) {
		transition: text-decoration-color .2s ease-in-out;
	}
	:where(a[href]:hover ._a_reverse) {
		text-decoration-color: var(--a-color);
	}
	:where(a[href] ._hl) {
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-thickness: .06em;
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
		text-underline-offset: .1em;
	}
	:where(a[href]:hover ._hl) {
		text-decoration-color: var(--a-color);
	}
	:where(a[href] ._hl.-hvw) {
		text-decoration-color: rgba(255,255,255,0);
	}
	:where(a[href]:hover ._hl.-hvw) {
		text-decoration-color: #fff;
	}
}

:where(label) {
	cursor: pointer;
}
:where(input, select, textarea, button) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	vertical-align: middle;
	font-family: inherit;
	font-weight: inherit;
	font-feature-settings: inherit;
	outline: none;
	font-size: 100%;
}
::placeholder {
	color: #ccc;
}
:where(button) {
	cursor: pointer;
}

.hidden {
	display: none;
}
.slick-slider * {
	outline: none;
}

#top {
	display: block;
}

/* pc / sp
====================================================================== */
@media screen and (min-width: 744px), print {
	._sp {
		display: none !important;
	}
	._pc_break {
		position: relative;
		display: block;
		height: 0;
		overflow: hidden;
	}
	._pc_hidden {
		position: relative;
		overflow: hidden;
		display: block;
		height: 0;
	}
}
@media screen and (max-width: 743px) {
	._pc {
		display: none !important;
	}
	._sp_break {
		position: relative;
		display: block;
		height: 0;
		overflow: hidden;
	}
}

/* color
====================================================================== */
._c_base {
	color: var(--color-base) !important;
}
._c_black {
	color: var(--color-black) !important;
}
._bg_gray {
	background-color: var(--bg-gray);
}
._bg_dark {
	background-color: var(--color-base);
	color: #fff;
}

/* font
====================================================================== */
._fwn {
	font-weight: var(--font-weight);
}
._fwr {
	font-weight: var(--font-weight-reg);
}
._fwm {
	font-weight: var(--font-weight-medium);
}
._fwb {
	font-weight: var(--font-weight-bold);
}
._wsnw {
	white-space: nowrap;
}
@media screen and (min-width: 744px), print {
	._pc_wsnw {
		white-space: nowrap;
	}
}
@media screen and (max-width: 743px) {
	._sp_wsnw {
		white-space: nowrap;
	}
}

/* display
====================================================================== */
._db {
	display: block;
}
._dib {
	display: inline-block;
}
._dfcc {
	display: flex !important;
	justify-content: center;
	align-items: center;
}
@media screen and (min-width: 744px), print {
	._pc_dib {
		display: inline-block;
	}
	._pc_dfcc {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
}
@media screen and (max-width: 743px) {
	._sp_dib {
		display: inline-block;
	}
	._sp_dfcc {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
}

/* object-fit
====================================================================== */
img._of {
	width: 100%;
	height: 100%;
	object-fit: cover;
	&.-abs {
		position: absolute;
		top: 0;
		left: 0;
	}
	&.-bg {
		pointer-events: none;
		user-select: none;
		z-index: -1;
	}
	&.-top {
		object-position: 50% 0;
	}
	&.-bottom {
		object-position: 50% 100%;
	}
	&.-contain {
		object-fit: contain;
	}
	@media screen and (min-width: 744px), print {
		&.-pc_none {
			object-fit: none;
		}
		&.-pc_top {
			object-position: 50% 0;
		}
		&.-pc_bottom {
			object-position: 50% 100%;
		}
	}
	@media screen and (max-width: 743px) {
		&.-sp_top {
			object-position: 50% 0;
		}
		&.-sp_bottom {
			object-position: 50% 100%;
		}
	}
}
@media screen and (min-width: 744px), print {
	img._pc_of {
		width: 100%;
		height: 100%;
		object-fit: cover;
		&.-abs {
			position: absolute;
			top: 0;
			left: 0;
		}
		&.-bg {
			pointer-events: none;
			user-select: none;
			z-index: -1;
		}
		&.-top {
			object-position: 50% 0;
		}
		&.-none {
			object-fit: none;
		}
	}
}
@media screen and (max-width: 743px) {
	img._sp_of {
		width: 100%;
		height: 100%;
		object-fit: cover;
		&.-abs {
			position: absolute;
			top: 0;
			left: 0;
		}
		&.-bg {
			pointer-events: none;
			user-select: none;
			z-index: -1;
		}
		&.-top {
			object-position: 50% 0;
		}
	}
}

/* hover
====================================================================== */
@media (hover) {
	a[href] ._hv_op {
		transition: opacity var(--transition);
	}
	a:is([href], [data-modal])._hv_op:hover,
	a[href]:hover ._hv_op,
	button._hv_op:hover,
	._hv_op a[href]:hover {
		opacity: 0.8;
	}
	a[href]._hv_op.-a50:hover,
	a[href]:hover ._hv_op.-a50,
	._hv_op.-a50 a[href]:hover {
		opacity: 0.5;
	}
	a[href]._hv_op.-a20:hover,
	a[href]:hover ._hv_op.-a20,
	._hv_op.-a20 a[href]:hover {
		opacity: 0.8;
	}
	a[href]._hv_op.-a10:hover,
	a[href]:hover ._hv_op.-a10,
	._hv_op.-a10 a[href]:hover {
		opacity: 0.9;
	}
}

._hv_zoom {
	position: relative;
	display: block;
	overflow: hidden;
	& > * {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-repeat: no-repeat;
		background-position: 50%;
		background-size: cover;
	}
	&.-static > * {
		position: relative;
	}
}
@media (hover) {
	a[href]._hv_zoom > *,
	a[href] ._hv_zoom > * {
		transition: transform 0.5s, opacity .3s;
	}
	a[href]:hover ._hv_zoom.-s > * {
		transform: scale(1.03);
	}
	a[href]:hover ._hv_zoom.-l > * {
		transform: scale(1.1);
	}
	a[href]:hover._hv_zoom > *,
	a[href]:hover ._hv_zoom > * {
		transform: scale(1.05);
	}
}


/* _target
====================================================================== */
._target {
	display: block;
	scroll-margin-top: calc(var(--header-height) + 3rem);
}
:where(#container [id]:not(style):not(script)) {
	scroll-margin-top: calc(var(--header-height) + 3rem);
}
:where(#container [id]._scroll-margin-top0, #header) {
	scroll-margin-top: 0 !important;
}
:where(#container [id]._scroll-margin-top-fit) {
	scroll-margin-top: var(--header-height);
}

/* spパディング
====================================================================== */
@media screen and (max-width: 743px) {
	._sp_pd {
		padding-inline: var(--sp-base-padding) !important;
	}
	._sp_mg {
		margin-inline: var(--sp-base-padding) !important;
	}
	._sp_full {
		margin-inline: calc(var(--sp-base-padding) * -1) !important;
	}
	._sp_full_l {
		margin-left: calc(var(--sp-base-padding) * -1) !important;
	}
	._sp_full_r {
		margin-right: calc(var(--sp-base-padding) * -1) !important;
	}
	._sp_pd-l {
		padding-inline: 3rem !important;
	}
}

/* header
====================================================================== */
.header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	@media print {
		position: relative;
	}
	@media screen and (max-width: 743px) {
		display: flex;
		justify-content: end;
		margin-bottom: 2rem;
		padding-top: 4rem;
		overflow: hidden;
	}
	.gnav {
		@media screen and (min-width: 744px), print {
			display: flex;
			justify-content: space-between;
		}
		li {
			transition: transform .5s ease-out;
		}
		a {
			position: relative;
			display: block;
			padding: 1rem 3rem;
			letter-spacing: 0.03em;
			@media screen and (max-width: 743px) {
				padding: .5rem var(--sp-base-padding);
				text-align: right;
			}
			&.is-active {
				text-decoration-color: var(--a-color);
			}
			&[target] {
				display: flex;
				align-items: center;
				&::after {
					content: "";
					display: block;
					position: relative;
					top: -.2rem;
					width: 1.3rem;
					height: 1.3rem;
					margin-left: .2rem;
					background: url(../img/ico-blank.svg) no-repeat 50%;
					background-size: 100%;
					@media screen and (max-width: 743px) {
						width: .5rem;
						height: .5rem;
						margin-right: -0.7rem;
					}
				}
			}
			span {
				letter-spacing: inherit;
			}
		}
	}
	&.-fixed {
		position: fixed;
		top: 0;
	}
	&:not(.header-current-nav):not(.works_tab) {
		a.is-active {
			visibility: hidden;
		}
	}
	&.header-current-nav {
		position: fixed;
		z-index: 901;
		pointer-events: none;
		a {
			visibility: hidden;
		}
		a.is-active {
			visibility: visible;
			pointer-events: auto;
		}
	}
}
@media screen {
	body:has(.kv) .header {
		opacity: 0;
	}
	body:has(.kv.img-view) .header {
		opacity: 1;
		transition: opacity 1s linear;
	}
}

/* container
====================================================================== */
#container {
	padding-top: calc((1lh + 1rem * 2) + 4rem);
	@media screen and (max-width: 743px) {
		padding-top: calc((1lh + .5rem * 2) * 5 + 4rem + 2rem);
	}
}

/* footer
====================================================================== */
#footer {
	position: relative;
	margin-top: 42rem;
	padding-bottom: 18rem;
	@media screen and (min-width: 744px), print {
		width: 140rem;
		margin-inline: auto;
	}
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		padding-bottom: 2rem;
		padding-inline: var(--sp-base-padding);
	}
	.morita_link {
		display: block;
		width: fit-content;
		text-decoration: none;
		.morita {
			width: 32.4rem;
			margin-left: 3rem;
			@media screen and (max-width: 743px) {
				width: 10.6rem;
				margin-left: 1.2rem;
			}
		}
		small {
			display: block;
			margin-top: 2rem;
			letter-spacing: .05em;
			@media screen and (max-width: 743px) {
				margin-top: 1rem;
			}
		}
	}
}
#footer .sns {
	--ico-width: 5.4rem;
	width: fit-content;
}
#footer .sns li:not(:last-child) {
	margin-bottom: 1.5rem;
}
#footer .sns a {
	display: block;
	position: relative;
	text-align: right;
	padding-right: 9rem;
}
#footer .sns a .ico {
	position: absolute;
	left: calc(100% - var(--ico-width));
	top: 50%;
	width: auto;
	height: var(--ico-width);
	transform: translateY(-50%);
}
@media screen and (min-width: 744px), print {
	#footer .sns {
		position: absolute;
		right: 0;
		bottom: 18rem;
	}
}
@media screen and (max-width: 743px) {
	#footer .sns {
		--ico-width: 1.8rem;
		margin-left: auto;
		margin-bottom: 2rem;
	}
	#footer .sns a {
		padding-right: 3rem;
	}
}
:is(.-page-index, .-page-404) #footer .sns {
	position: static;
	margin-bottom: 16rem;
}
:is(.-page-index, .-page-404) #footer .sns a {
	text-align: left;
	padding-right: 0;
	padding-left: 9rem;
}
:is(.-page-index, .-page-404) #footer .sns a .ico {
	left: 0;
}
@media screen and (max-width: 743px) {
	:is(.-page-index, .-page-404) #footer .sns {
		margin-left: 0;
		margin-bottom: 5rem;
	}
	:is(.-page-index, .-page-404) #footer .sns a {
		padding-left: 3rem;
	}
}


/* ===================================================================================================================

	パーツ

============================================================================= */

/* inquires_btn
====================================================================== */
#inquires_btn {
	position: relative;
	overflow: hidden;
	z-index: 10;
	@media screen and (max-width: 743px) {
		transform: scale(calc(10.6 / 43));
	}
	a {
		position: relative;
		display: block;
		width: 43rem;
		height: 43rem;
		border: .4rem solid #000;
		border-radius: 100%;
		.company {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 2rem;
			border-radius: 100%;
			font-size: 2.4rem;
			transform: rotate(-45deg);
			letter-spacing: 0.05em;
			line-height: 1;
		}
		.svg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			svg {
				width: 100%;
				height: 100%;
				font-size: 46px;
				border-radius: 100%;
				transition: transform var(--transition);
				.text-on-arc {
					font-variant-ligatures: none;
				}
				textPath {
					letter-spacing: 0.12em;
					padding-left: 0.12em;
					transition: letter-spacing var(--transition);
				}
			}
		}
		&::before, &::after {
			content: "";
			position: absolute;
			top: 13.8rem;
			width: 4.8rem;
			height: 5.6rem;
			background: url(../img/v.svg) no-repeat 50%;
			background-size: 100%;
			transition: transform var(--transition);
		}
		&::before {
			left: 5.6rem;
		}
		&::after {
			right: 5.6rem;
		}
		@media (hover: hover) and (pointer: fine) {
			&:hover {
				svg {
					transform: rotate(-20deg);
					textPath {
						letter-spacing: 0.3em;
					}
				}
				&::before, &::after {
					transition: transform .2s;
					transform: scaleY(-1);
				}
			}
		}
		@media (hover: none) and (pointer: coarse) {
			&:active {
				svg {
					transform: rotate(-20deg);
					textPath {
						letter-spacing: 0.3em;
					}
				}
				&::before, &::after {
					transition: transform .2s;
					transform: scaleY(-1);
				}
			}
		}
	}
}
.-page-index,
.-page-404 {
	#inquires_btn {
		position: absolute;
		bottom: 14rem;
		right: 3rem;
		@media screen and (max-width: 743px) {
			bottom: 6rem;
			right: 2rem;
			transform-origin: 100% 100%;
		}
	}
}
.-page-sample,
.-page-works {
	&:has(#inquires_btn) {
		padding-bottom: 35rem;
		@media screen and (max-width: 743px) {
			padding-bottom: 15rem;
		}
	}
	#inquires_btn {
		position: fixed;
		bottom: 3rem;
		left: 17rem;
		@media screen and (max-width: 743px) {
			transform-origin: 0 100%;
			left: 4rem;
		}
	}
	@media screen {
		&:has(.kv) #inquires_btn {
			pointer-events: none;
			opacity: 0;
		}
		&:has(.kv.logo-view) #inquires_btn {
			pointer-events: auto;
			opacity: 1;
			transition: opacity .5s 2s linear;
		}
	}
}

/* kv
====================================================================== */
.kv {
	position: relative;
	height: 93.4rem;
	@media screen and (max-width: 743px) {
		height: 36.6rem;
	}
	svg {
		width: 100%;
		height: auto;
	}
	.logo {
		position: absolute;
		z-index: 2;
		@media screen and (min-width: 744px), print {
			width: 32rem;
			left: 145rem;
			bottom: 14rem;
			transform: translateX(-25.8%);
		}
		@media screen and (max-width: 743px) {
			width: 9.6rem;
			left: 6.4rem;
			top: 6rem;
		}
	}
	.eye {
		position: absolute;
		width: 31rem;
		top: 29.2rem;
		left: calc(50% + 34rem);
		z-index: 2;
		svg {
			position: absolute;
			left: 0;
			top: 0;
		}
		@media screen and (max-width: 743px) {
			width: 9.2rem;
			left: 4rem;
			top: -7.2rem;
		}
	}
	.kv_img {
		position: relative;
		height: 100%;
		z-index: 1;
		.item {
			position: absolute;
			inset: 0;
			opacity: 0;
			transition: opacity 1s linear;
			pointer-events: none;
			&.is-active {
				z-index: 2;
				opacity: 1;
				pointer-events: auto;
			}
			.img {
				position: absolute;
				left: 0;
				top: 0;
				width: 145rem;
				aspect-ratio: 1600 / 1030;
				overflow: hidden;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					filter: blur(10px);
				}
			}
			&.is-view {
				img {
					filter: blur(0px);
					transition: filter 1s ease;
				}
			}
			@media screen and (max-width: 743px) {
				.img {
					left: auto;
					right: 0;
					width: 28.6rem;
					aspect-ratio: 650 / 830;
				}
				&.is-view {
					img {
						transform: scale(1);
						filter: blur(0px);
						transition: transform 6s linear, filter 1s ease;
					}
				}
			}
		}
		.caption {
			position: absolute;
			right: 1rem;
			bottom: 50%;
			font-size: 1.5rem;
			white-space: nowrap;
			letter-spacing: 0.03em;
			transform: rotate(90deg) translateX(50%);
			transform-origin: 100% 0;
			img {
				width: 8.4rem;
				margin-left: 0.5rem;
				vertical-align: middle;
			}
		}
		@media screen and (max-width: 743px) {
			.caption {
				right: auto;
				left: 1rem;
				bottom: 0;
				font-size: .8rem;
				transform: rotate(90deg) translateX(-100%);
				transform-origin: 0 100%;
				img {
					width: 4.4rem;
				}
			}
		}
	}
	@media screen {
		.logo {
			path, polygon, rect {
				/* opacity: 0; */
			}
			.-logo2, .-logo6 {
				transform: translateY(7px);
			}
		}
		.kv_img {
			opacity: 0;
		}
		&.img-view {
			.kv_img {
				opacity: 1;
				transition: opacity 1s linear;
			}
		}
		&.logo-view {
			.logo {
				path, polygon, rect {
					transform: translateY(0);
					transition: transform .5s .5s cubic-bezier(0.175, 0.885, 0.32, 2);
				}
			}
		}
	}
}

/* index_contents
====================================================================== */
.index_contents {
	margin-top: 18rem;
	word-break: break-word;
	overflow-wrap: anywhere;
	hyphens: auto;
	word-wrap: break-word;
	text-align: justify;
	@media screen and (min-width: 744px), print {
		& > section {
			width: 134rem;
			margin-inline: auto;
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 5rem;
		& > section {
			margin-inline: calc(var(--sp-base-padding) + 1rem) var(--sp-base-padding);
		}
	}
	h2 {
		margin-bottom: 6rem;
		text-indent: -3rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 2rem;
			text-indent: -1rem;
		}
	}
	section + section {
		margin-top: 28rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
	}
	.numbers {
		display: flex;
		justify-content: space-between;
		margin-top: 28rem;
		margin-bottom: 20rem;
		margin-inline: -3rem;
		li {
			width: 24rem;
			text-align: center;
		}
		.caption {
			display: block;
			margin-top: 6rem;
			margin-inline: -2em;
			line-height: calc(66 / 50);
			letter-spacing: .03em;
			.num {
				position: relative;
				display: inline-block;
				color: #fff;
				&::before {
					content: "";
					position: absolute;
					top: .1em;
					left: -.1em;
					right: -.1em;
					bottom: -.1em;
					background-color: var(--color-base);
					z-index: -1;
				}
			}
		}
		@media screen {
			.caption {
				.num {
					color: var(--color-base);
					&::before {
						transform-origin: 0 0;
						transform: scaleX(0);
					}
				}
			}
			.is-inview + .caption {
				.num {
					transition: color .5s 1s ease-in-out;
					color: #fff;
					&::before {
						transition: transform .4s 1s ease-in-out;
						transform: scaleX(1);
					}
				}
			}
		}
		.line-anim {
			width: 18.4rem;
			polyline, line {
				fill: #fff;
				stroke: #000;
				will-change: stroke-dashoffset;
			}
			&.is-inview {
				polyline, line {
					animation-name: drawLine;
					animation-duration: var(--dur, 1s);
					animation-timing-function: var(--ease, ease);
					animation-delay: var(--delay, 0s);
					animation-fill-mode: forwards;
				}
			}
		}
		@media screen and (max-width: 743px) {
			flex-wrap: wrap;
			justify-content: center;
			gap: 3rem 0;
			margin-top: 5rem;
			margin-bottom: 6rem;
			margin-inline: 0;
			li {
				width: 12rem;
			}
			.caption {
				margin-top: 2rem;
			}
			.line-anim {
				width: 6rem;
			}
		}
	}

	.fsc {
		display: flex;
		align-items: end;
		margin-top: 4rem;
		color: #305c4e;
		@media screen and (min-width: 744px), print {
			flex-direction: row-reverse;
			justify-content: space-between;
			.mark {
				width: 26.8rem;
			}
		}
		@media screen and (max-width: 743px) {
			.mark {
				flex-shrink: 0;
				width: 8.4rem;
				margin-right: 2rem;
			}
		}
	}

	.index_about_image {
		position: relative;
		max-width: 145rem;
		margin-top: 33rem;
		margin-left: auto;
		aspect-ratio: 1600 / 1030;
		@media screen and (max-width: 743px) {
			margin-top: 6rem;
		}
		.ph {
			position: absolute;
			width: 100%;
			height: 100%;
			transition: opacity 1s linear;
			pointer-events: none;
			opacity: 0;
			&.is-active {
				z-index: 2;
				opacity: 1;
				pointer-events: auto;
			}
			img {
				object-fit: cover;
				width: 100%;
				height: 100%;
				filter: blur(10px);
			}
			&.is-view {
				img {
					filter: blur(0px);
					transition: filter 1s ease;
				}
			}
		}
	}

	.faq_section {
		margin-top: 36rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
			margin-bottom: 13rem;
		}
		dt, dd {
			position: relative;
			padding-left: 6rem;
			@media screen and (max-width: 743px) {
				padding-left: 3rem;
			}
			&::before {
				position: absolute;
				top: 0;
				left: -3rem;
				@media screen and (max-width: 743px) {
					left: -1rem;
				}
			}
		}
		dt {
			margin-bottom: .5lh;
			&::before {
				content: "Q";
			}
		}
		dd {
			&::before {
				content: "A";
			}
			&:not(:last-child) {
				margin-bottom: 1lh;
			}
		}
	}
}
@keyframes drawLine {
	to { stroke-dashoffset: var(--offset-end, 0); }
}

/* item_list
====================================================================== */
.item_list_wrap {
	position: relative;
	max-width: 128rem;
	margin-inline: auto;
	margin-top: 38rem;
}
@media screen and (max-width: 743px) {
	.item_list_wrap {
		margin-top: 12rem;
		padding-inline: var(--sp-base-padding);
	}
}
.item_list {
	--img-width: 59.6rem;
	@media screen and (max-width: 743px) {
		--img-width: 15.4rem;
	}
	a {
		position: relative;
		display: block;
		text-decoration: none;
		letter-spacing: 0.03em;
		.title {
			display: block;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			line-height: 1.3;
		}
		.img {
			position: absolute;
			width: var(--img-width);
			aspect-ratio: 1.44 / 1;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				&.ov {
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					pointer-events: none;
					/* animation: showhide 4s linear infinite; */
					transition: opacity .4s ease-in-out, transform var(--transition);
				}
			}
		}
		@media (hover: hover) and (pointer: fine) {
			.img img {
				transition: opacity .4s ease-in-out, transform var(--transition);
			}
			&:not(:has(.ov)):hover {
				.img img {
					transform: scale(1.03);
					@media screen and (max-width: 743px) {
						transform: scale(1.06);
					}
				}
			}
			&:has(.ov):hover {
				.img {
					opacity: 1;
					.ov {
						opacity: 1;
					}
				}
			}
		}
		@media (hover: none) and (pointer: coarse) {
			.img img {
				transition: opacity .4s ease-in-out, transform var(--transition);
			}
			&:not(:has(.ov)):active {
				.img img {
					transform: scale(1.03);
					@media screen and (max-width: 743px) {
						transform: scale(1.06);
					}
				}
			}
			&:has(.ov):active {
				.img {
					opacity: 1;
					.ov {
						opacity: 1;
					}
				}
			}
		}
	}
	li {
		&:nth-child(2n + 1) {
			padding-bottom: calc(var(--img-width) * (1 / 1.44));
			.title {
				padding-bottom: 0.3em;
			}
			.img {
				top: 100%;
				left: 0;
			}
			&:not(:first-child) {
				margin-top: 12rem;
				@media screen and (max-width: 743px) {
					margin-top: 3rem;
				}
			}
		}
		&:nth-child(2n) {
			text-align: right;
			.title {
				padding-top: 0.3em;
			}
			.img {
				bottom: 100%;
				right: 0;
			}
		}
	}
}
@keyframes showhide {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100%{ opacity: 0; }
}

.change_link li {
	--width: 10.6rem;
	position: absolute;
	width: var(--width);
}
.change_link a {
	display: block;
	transition: transform .3s ease-out;
}
.change_link li img {
	width: 100%;
}
.change_link li:nth-child(1) {
	right: 0;
	top: calc(var(--width) * -1);
}
.change_link li:nth-child(2) {
	left: 0;
	bottom: calc(var(--width) * -1);
}
.item_list:has(> li:nth-last-child(1):nth-child(odd)) + .change_link li:nth-child(2) {
	bottom: calc(var(--width) * -1 - 1lh);
}
@media (hover: hover) and (pointer: fine) {
	.change_link a:hover {
		transform: rotate(180deg);
	}
}
@media (hover: none) and (pointer: coarse) {
	.change_link a:active {
		transform: rotate(180deg);
	}
}
@media screen and (max-width: 743px) {
	.change_link li {
		--width: 2.8rem;
	}
	.change_link li:nth-child(1) {
		right: var(--sp-base-padding);
	}
	.change_link li:nth-child(2) {
		left: var(--sp-base-padding);
		z-index: 920;
	}
}


/* works_all
====================================================================== */
.works_all {
	margin-top: 37rem;
	@media screen and (max-width: 743px) {
		min-height: 80vh;
		margin-top: 0;
	}
	.header {
		position: sticky;
		top: 0;
		margin-bottom: 10rem;
		opacity: 1;
		z-index: 910;
		@media screen and (max-width: 743px) {
			margin-bottom: -2rem;
		}
		a {
			text-decoration: none;
			&::before {
				content: "";
				position: absolute;
				right: 0;
				left: 0;
				bottom: 3rem;
				top: 1rem;
				border: .08em solid #000;
				border-bottom-width: 0;
				opacity: 0;
				@media screen and (max-width: 743px) {
					right: 1.5rem;
					left: 1.5rem;
					bottom: 1rem;
					top: .6rem;
				}
			}
			&:not([data-tab]) {
				visibility: hidden;
			}
			&.is-active {
				span {
					visibility: hidden;
				}
				&::before {
					opacity: 1;
				}
			}
			&.is-active-tab {
				&::before {
					opacity: 1;
				}
			}
			@media (hover) {
				&:hover {
					&::before {
						opacity: 1;
					}
				}
			}
		}
		&:has(.is-active-tab) {
			a[data-tab]:not(.is-active-tab)::before {
				opacity: 0;
			}
		}
		@media (hover) {
			&:has(a:hover) {
				a[data-tab]:not(:hover)::before {
					opacity: 0;
				}
			}
		}
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		li {
			aspect-ratio: 1;
			transition: opacity 1s linear;
			&.out {
				transition-duration: .2s;
				opacity: 0;
			}
			&.hide {
				width: 0;
				overflow: hidden;
				pointer-events: none;
				opacity: 0;
				position: absolute;
			}
			a {
				display: block;
				overflow: hidden;
				height: 100%;
				img {
					transition: transform var(--transition);
				}
				@media (hover: hover) and (pointer: fine) {
					&:hover {
						img {
							transform: scale(1.04);
							@media screen and (max-width: 743px) {
								transform: scale(1.06);
							}
						}
					}
				}
				@media (hover: none) and (pointer: coarse) {
					&:active {
						img {
							transform: scale(1.04);
							@media screen and (max-width: 743px) {
								transform: scale(1.06);
							}
						}
					}
				}
			}
		}
		@media screen and (min-width: 744px), print {
			width: 128rem;
			margin-inline: auto;
			li {
				width: calc((100% - 2rem * 2) / 3);
			}
		}
		@media screen and (max-width: 743px) {
			gap: 0.6rem;
			padding-inline: var(--sp-base-padding);
			li {
				width: calc((100% - 0.6rem * 2) / 3);
			}
		}
	}
}
.not-header-td {
	.header-current-nav {
		a[data-tab] {
			transition: text-decoration-color .1s ease-in-out;
			text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
		}
	}
}
.is-works-tab {
	#header {
		a[data-tab] {
			visibility: hidden;
		}
	}
	.header-current-nav {
		a[data-tab] {
			visibility: visible;
			pointer-events: auto;
			&::before {
				content: "";
				position: absolute;
				right: 0;
				left: 0;
				bottom: 3rem;
				top: 1rem;
				border: .08em solid #000;
				border-bottom-width: 0;
				opacity: 0;
				transition: opacity .3s ease-in-out;
				@media screen and (max-width: 743px) {
					right: 1.5rem;
					left: 1.5rem;
					bottom: 1rem;
					top: .6rem;
				}
			}
			&.is-active {
				span {
					visibility: hidden;
				}
				&::before {
					opacity: 1;
				}
			}
			@media (hover) {
				&:hover {
					&::before {
						opacity: 1;
					}
				}
			}
		}
		@media (hover) {
			&:has(a:hover) {
				a[data-tab]:not(:hover)::before {
					opacity: 0;
				}
			}
		}
	}
	.works_all {
		.header {
			visibility: hidden;
		}
	}
}

/* archive_page
====================================================================== */
.archive_page {
	@media screen and (min-width: 744px), print {
		width: 128rem;
		margin-inline: auto;
	}
	@media screen and (max-width: 743px) {
		padding-inline: var(--sp-base-padding);
	}
	h1 {
		margin-bottom: 1rem;
		@media screen and (max-width: 743px) {
			margin-bottom: .5rem;
		}
	}
	.img {
		margin-bottom: 2rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 1rem;
		}
		picture {
			width: 108rem;
			flex-shrink: 0;
			@media screen and (max-width: 743px) {
				width: 26.2rem;
			}
		}
		a {
			display: flex;
			align-items: center;
			text-decoration: none;
			.link {
				position: relative;
				padding-left: 9.8rem;
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: calc(50% - 4.8rem / 2);
					width: 5.6rem;
					height: 4.8rem;
					background: url(../img/ico-arrow.svg) no-repeat 50%;
					background-size: 100%;
				}
				@media screen and (max-width: 743px) {
					padding-left: 2rem;
					&::before {
						width: 1.4rem;
					}
				}
			}
		}
	}
	.body {
		margin-top: 10rem;
		word-break: break-word;
		overflow-wrap: anywhere;
		hyphens: auto;
		word-wrap: break-word;
		text-align: justify;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
		& > p:not(:last-child) {
			margin-bottom: 1lh;
		}
	}
	.back_btn {
		margin-top: 26rem;
		@media screen and (max-width: 743px) {
			margin-top: 6rem;
		}
		a {
			position: relative;
			display: inline-block;
			padding-right: 9rem;
			&::before {
				content: "";
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: 5.6rem;
				background: url(../img/ico-arrow.svg) no-repeat 50%;
				background-size: 100%;
				transform: scaleX(-1);
			}
			@media screen and (max-width: 743px) {
				padding-right: 2rem;
				&::before {
					width: 1.4rem;
				}
			}
		}
	}
}


/* paragraph
====================================================================== */
.paragraph > * + * {
	margin-top: 1lh;
}
.paragraph.-m > * + * {
	margin-top: .7lh;
}

/* page404
====================================================================== */
.page404 {
	@media screen and (min-width: 744px), print {
		width: 128rem;
		margin-inline: auto;
	}
	@media screen and (max-width: 743px) {
		padding-inline: var(--sp-base-padding);
	}
}


/* ul / ol
====================================================================== */
.dot_li > li {
	position: relative;
	padding-left: 1em;
}
.dot_li > li::before {
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
}

.circle_li > li {
	position: relative;
	padding-left: 1.1em;
}
.circle_li > li::before {
	content: "";
	position: absolute;
	top: calc(.5lh - .5rem);
	left: 0;
	width: 1rem;
	height: 1rem;
	background-color: var(--color-theme2);
	border-radius: 100%;
}

.parentheses_li > li {
	position: relative;
	padding-left: 2.8em;
}
.parentheses_li > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

.parentheses_li_h > li {
	position: relative;
	padding-left: 1.6em;
}
.parentheses_li_h > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}
.parentheses_li_hh > li {
	position: relative;
	padding-left: 2.2em;
}
.parentheses_li_hh > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

.point_li > li {
	position: relative;
	padding-left: 1.2em;
}
.point_li > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

.square_li > li {
	position: relative;
	padding-left: 0.8em;
}
.square_li > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .8em;
	width: 5px;
	height: 5px;
	background-color: #14143c;
}
@media screen and (max-width: 743px) {
	.square_li > li::before {
		top: 0.6em;
	}
}

.num_li {
	margin-left: 1.8em;
	list-style: decimal;
}
.alphabet_li {
	margin-left: 1.8em;
	list-style: lower-latin;
}

.mt_li > li + li {
	margin-top: .8lh;
}
.mt_li_s > li + li {
	margin-top: .5lh;
}
@media screen and (max-width: 743px) {
	.sp_mt_li > li + li {
		margin-top: 0.8em;
	}
}

.inline_li > li {
	display: inline-block;
	margin-right: 0.3em;
}

@media screen and (min-width: 744px), print {
	.column_li {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.column_li > li {
		width: 48%;
	}
	.column_li > li:nth-child(n + 3) {
		margin-top: 0.25em;
	}
}
@media screen and (max-width: 743px) {
	.column_li > li + li {
		margin-top: 0.25em;
	}
}

.dl_table {
	display: table;
}
.dl_table > * {
	display: table-row;
}
.dl_table > * > * {
	display: table-cell;
}
.dl_table dt {
	white-space: nowrap;
}
.dl_table.-dt_pr dt {
	padding-right: 1em;
}