@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: #231815;
	--color-white: #fff;
	--color-theme: #1F3CB0;
	--color-dark: #003F75;
	--bg-base: #F5F5F5;
	--base-width: 130rem;
	--base-width-l: 140rem;
	--pc-min-window: 1400;
	--pc-base-padding: 4rem;
	--sp-base-padding: 2rem;
	--font-family-jp: "Zen Kaku Gothic Antique", sans-serif;
	--font-family-en: "DM Sans", var(--font-family-jp);
	--font-family-outfit: "Outfit", var(--font-family-jp);
	--font-weight-reg: 400;
	--font-weight-medium: 500;
	--font-weight-semi: 600;
	--font-weight-bold: 700;
	--font-weight: var(--font-weight-medium);
	--ls: 0.05em;
	--white-filter: brightness(0) invert(1);
	--transition-duration: .3s;
	--transition: var(--transition-duration) ease-in-out;
	--header-height: 8rem;
	--target-margin: 3rem;
	--clip-triangle-up: polygon(50% 0, 100% 100%, 0 100%);
	--clip-triangle-right: polygon(0 0, 100% 50%, 0 100%);
	--clip-triangle-down: polygon(0 0, 100% 0, 50% 100%);
	--clip-triangle-left: polygon(100% 0, 100% 100%, 0 50%);
	/* --footer-fix-btn-height: 0; */
	@media screen and (max-width: 743px) {
		--header-height: 6rem;
		--target-margin: 2rem;
		/* --footer-fix-btn-height: 6rem; */
	}
}

/* base
====================================================================== */
html {
	position: relative;
	font-size: 62.5%;
	scroll-behavior: smooth;
	@media screen and (min-width: 744px), print {
		font-size: min(calc(10px - ((var(--pc-min-window) * 1px) - 100vw) * (10 / var(--pc-min-window))), 10px);
	}
	@media screen and (max-width: 743px) {
		font-size: calc((10 / 390) * 100vw);
	}
}
html.no-scroll-behavior {
	scroll-behavior: auto;
}
body {
	background: var(--bg-base) url(../img/page-bg.png) 50% 0;
	background-size: 20rem;
	font-size: 1.6rem;
	line-height: 1.8;
	color: var(--color-base);
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-family: var(--font-family-jp);
	font-weight: var(--font-weight);
	font-optical-sizing: auto;
	/* font-feature-settings: "palt"; */
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	@media screen and (max-width: 743px) {
		font-size: 1.3rem;
		background-size: 10rem;
	}
}
* {
	letter-spacing: var(--ls);
}
*,
*::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-bold);
}
:where(img) {
	max-width: 100%;
	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[href], a[data-modal]) {
	--a-color: var(--color-base);
	color: var(--a-color);
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--a-color);
	text-underline-offset: .3em;
	outline: none;
	cursor: pointer;
}
:where(a[href]._a_reverse,._a_reverse a[href]) {
	text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
}
:where(a[href] ._hl.-hlr) {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--a-color);
	text-underline-offset: .3em;
}
:where(a[href^="tel:"]) {
	@media screen and (min-width: 744px), print {
		text-decoration: none;
	}
}
@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: 1px;
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
		text-underline-offset: .3em;
	}
	: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: 1px;
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
		text-underline-offset: .3em;
	}
	:where(a[href]:hover ._hl) {
		text-decoration-color: var(--a-color);
	}
	:where(a[href] ._hl.-hlr) {
		text-decoration-color: var(--a-color);
	}
	:where(a[href]:hover ._hl.-hlr) {
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
	}
}

: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: #ACACAC;
}
:where(button) {
	cursor: pointer;
}

.hidden {
	display: none;
}
.slick-slider * {
	outline: none;
}

#top {
	position: absolute;
	top: 0;
	left: 0;
	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_theme {
	color: var(--color-theme) !important;
}

/* font
====================================================================== */
._ff_en {
	font-family: var(--font-family-en);
	font-weight: var(--font-weight-semi);
}
._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);
}
._fzs {
	font-size: 1.4rem;
	line-height: calc(26 / 14);
	@media screen and (max-width: 743px) {
		font-size: 1.2rem;
		line-height: calc(25 / 12);
	}
}
._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,
video._of {
	display: block;
	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;
		}
	}
}

/* _fix_bg
====================================================================== */
._fix_bg {
	position: fixed;
	inset: 0;
	z-index: -1;
}
._clip {
	position: relative;
	clip-path: inset(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.7;
	}
	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) + var(--target-margin));
}
:where([id]:not(style):not(script)) {
	scroll-margin-top: calc(var(--header-height) + var(--target-margin));
}
:where([id]._scroll-margin-top0, #top) {
	scroll-margin-top: 0 !important;
}
:where([id]._scroll-margin-top-fit) {
	scroll-margin-top: calc(var(--header-height));
}

/* w
====================================================================== */
._w {
	position: relative;
	@media screen and (min-width: 744px), print {
		width: var(--base-width);
		max-width: calc(100% - 6rem);
		margin-inline: auto;
		&.-a {
			width: var(--base-width-a);
		}
	}
}
._pw {
	@media screen and (min-width: 744px), print {
		padding-inline: calc((100% - var(--base-width)) / 2);
	}
}

/* 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;
	}
}

/* animation
====================================================================== */
@keyframes slide-loop {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
@keyframes slide-loop-reverse {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}
@keyframes rotate-loop {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* header
====================================================================== */
#header {
	position: fixed;
	inset: 0 0 auto;
	height: var(--header-height);
	z-index: 900;
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(8px);
		opacity: 0;
		z-index: -1;
		transition: opacity .6s linear;
	}
	&.-bg {
		&::before {
			opacity: 1;
		}
	}
	.logo {
		position: relative;
		width: 17.8rem;
		z-index: 900;
	}
	.cnav a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 15rem;
		height: 5rem;
		background-color: var(--color-theme);
		border-radius: 0.2rem;
		padding-right: 1rem;
		color: #fff;
		font-family: var(--font-family-outfit);
		font-size: 1.6rem;
		font-weight: 500;
		text-decoration: none;
		&::after {
			content: "";
			position: absolute;
			top: calc(50% - .8rem / 2);
			right: 1rem;
			width: .6rem;
			height: .8rem;
			background-color: #fff;
			clip-path: var(--clip-triangle-right);
		}
		@media (hover) {
			&:hover {
				opacity: 0.8;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-inline: 3rem 1.5rem;
		nav {
			--ls: .1em;
			display: flex;
			align-items: center;
			gap: 4rem;
			font-size: 1.5rem;
			font-weight: var(--font-weight-bold);
			& > ul {
				display: flex;
			}
			.gnav {
				& > li {
					position: relative;
					/* padding-block: .5rem; */
					& + li:not(._sp:first-child + li)::after {
						content: "";
						position: absolute;
						left: 0;
						top: calc(50% - .5em);
						height: 1em;
						border-left: 1px solid #ACACAC;
						pointer-events: none;
						z-index: 3;
					}
					& > a {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 5rem;
						padding-inline: 2.4rem;
						text-decoration: none;
						color: #000;
						z-index: 3;
						&::after {
							content: "";
							position: absolute;
							inset: auto 1px 0;
							border-bottom: .4rem solid var(--color-theme);
							opacity: 0;
							transform: translateY(3px);
							pointer-events: none;
							transition: transform var(--transition), opacity var(--transition);
						}
						&.is-active {
							color: var(--color-theme);
							&::after {
								opacity: 1;
								transform: translateY(0);
							}
						}
						@media (hover) {
							&:hover {
								color: var(--color-theme);
								/* &::after {
									opacity: 1;
									transform: translateY(0);
								} */
							}
						}
					}
				}
				.dd_toggle {
					display: none;
				}
				.dd {
					position: absolute;
					white-space: nowrap;
					top: calc(100% - .6rem);
					left: 50%;
					padding-block: 1.5rem 2rem;
					background-color: var(--color-theme);
					border-radius: 0.4rem;
					min-width: max(100%, 15rem);
					font-size: 1.3rem;
					z-index: 1;
					a {
						display: block;
						height: auto;
						padding: 0.5rem 2rem;
						color: #fff;
						text-align: center;
						text-decoration: none;
						@media (hover) {
							&:hover {
								opacity: 0.6;
							}
						}
					}
					opacity: 0;
					pointer-events: none;
					transform: translate(-50%, 1rem);
					transition: opacity var(--transition), transform var(--transition);
					& > * {
						opacity: 0;
						transform: translateY(.5rem);
						transition: opacity var(--transition), transform var(--transition);
					}
				}
				li.hover {
					.dd {
						opacity: 1;
						pointer-events: auto;
						transform: translate(-50%, 0);
						& > * {
							opacity: 1;
							transform: translateY(0);
							transition-delay: .1s;
						}
					}
				}
			}
			.snav {
				position: absolute;
				top: 10rem;
				right: 0;
				height: 6rem;
				padding-inline: 4rem;
				display: flex;
				align-items: center;
				gap: 4rem;
				background-color: rgba(0,0,0,0.04);
				border-radius: 0.6rem 0 0 .6rem;
				dt {
					font-size: 1.6rem;
				}
				ul {
					display: flex;
					font-size: 1.4rem;
					font-weight: var(--font-weight-bold);
					li:not(:last-child)::after {
						content: "｜";
						color: #ACACAC;
					}
					a.is-active {
						--a-color: var(--color-theme);
					}
				}
			}
		}
	}
	@media print {
		position: absolute;
	}
	@media screen and (max-width: 743px) {
		.logo {
			a {
				display: flex;
				align-items: center;
				height: var(--header-height);
				padding-inline: var(--sp-base-padding);
				img {
					width: 14rem;
				}
			}
		}
		.nav_btn {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			aspect-ratio: 1;
			z-index: 900;
			button {
				position: relative;
				display: block;
				overflow: hidden;
				width: 100%;
				height: 100%;
				text-decoration: none;
				font-size: 1rem;
				text-indent: -999em;
			}
			&::before,
			button::before,
			button::after {
				content: "";
				position: absolute;
				width: 2.8rem;
				left: 0;
				right: 0;
				top: calc(50% - 1px);
				margin-inline: auto;
				border-top: 2px solid var(--color-theme);
				pointer-events: none;
				transition: transform var(--transition), opacity var(--transition);
				z-index: 2;
			}
			button::before {
				transform: translateY(-9px);
			}
			button::after {
				transform: translateY(9px);
			}
		}
		&.-headeropen .nav_btn {
			&::before {
				opacity: 0;
			}
			button::before {
				transform: rotate(30deg);
			}
			button::after {
				transform: rotate(-30deg);
			}
		}
		&::after {
			content: "";
			position: fixed;
			inset: 0;
			background: var(--bg-base) url(../img/page-bg.png) 50% 0;
			background-size: 10rem;
			opacity: 0;
			pointer-events: none;
			transition: opacity var(--transition);
			z-index: 800;
		}
		&.-headeropen::after {
			opacity: 1;
		}
		nav {
			position: fixed;
			inset: var(--header-height) 0 0;
			padding: 3rem 3rem 5rem;
			transition: transform var(--transition), opacity var(--transition);
			transform: scale(1.1);
			opacity: 0;
			overflow-y: auto;
			overscroll-behavior-y: contain;
			pointer-events: none;
			z-index: 899;
			a {
				position: relative;
				display: block;
				font-size: 1.6rem;
				line-height: 1.6;
				font-weight: var(--font-weight-bold);
				text-decoration: none;
				--ls: .05em;
				&[target] {
					display: flex;
					align-items: center;
					gap: 1rem;
					&::after {
						content: "";
						display: block;
						width: 2rem;
						height: 2rem;
						background: url(../img/ico-blank.svg) no-repeat 50%;
						background-size: 100%;
					}
				}
			}
			.gnav > li {
				position: relative;
				border-bottom: 1px solid;
				& > a {
					display: flex;
					align-items: center;
					height: 6rem;
				}
				&:has(.dd_toggle.-open) > a {
					color: var(--color-theme);
				}
				&:not(:has(.dd)) > a:not([target]) {
					&::after {
						content: "";
						position: absolute;
						top: 50%;
						right: 1rem;
						width: 1rem;
						height: 1rem;
						border-top: 2px solid var(--color-theme);
						border-right: 2px solid var(--color-theme);
						transform-origin: 100% 0;
						transform: rotate(45deg);
					}
				}
			}
			.dd_toggle {
				position: absolute;
				inset: 0 -0.6rem calc(100% - 6rem) auto;
				width: 4.4rem;
				display: flex;
				justify-content: center;
				align-items: center;
				.link_arrow {
					transform: rotate(90deg);
					transition: transform var(--transition), background-color var(--transition);
				}
				&.-open {
					.link_arrow {
						transform: rotate(-90deg);
						background-color: var(--color-theme);
						&::after {
							background-color: #fff;
						}
					}
				}
			}
			.dd {
				overflow: hidden;
				height: 0;
				transition: height var(--transition);
				.sub {
					position: relative;
					margin-left: 1.8rem;
					padding-bottom: 2rem;
					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 0.4rem;
						bottom: 2.4rem;
						border-left: 1px solid;
					}
					a {
						padding: 0.5rem 1.8rem;
						font-size: 1.4rem;
					}
				}
			}
		}
		&.-headeropen nav {
			transform: scale(1);
			opacity: 1;
			pointer-events: auto;
		}
		.relation_site {
			border-bottom: 1px solid;
			dt {
				position: relative;
				padding-block: 1.8rem;
				font-size: 1.3rem;
				line-height: 1.5;
				font-weight: var(--font-weight-bold);
				&::before,
				&::after {
					content: "";
					position: absolute;
					top: calc(50% - 1px);
					right: 0.9rem;
					width: 1.5rem;
					border-top: 2px solid var(--color-theme);
				}
				&::after {
					transform: rotate(90deg);
					transition: transform var(--transition);
				}
				&.-open::after {
					transform: rotate(0deg);
				}
			}
			.sub {
				padding-bottom: 1rem;
				a {
					padding: .6rem 1.5rem;
					font-size: 1.4rem;
				}
			}
		}
		.cnav {
			margin-top: 6rem;
			a {
				width: 28rem;
				margin-inline: auto;
			}
		}
		.snav {
			display: none;
		}
	}
}


/* footer
====================================================================== */
#footer {
	position: relative;
	max-width: var(--base-width-l);
	margin-inline: auto;
	padding-top: 12rem;
	z-index: 3;
	.pmark {
		display: flex;
		justify-content: flex-start;
		flex-direction: row-reverse;
		align-items: flex-end;
		gap: 2rem;
		font-size: 1.2rem;
		line-height: 1.8;
		img {
			width: 8rem;
		}
	}
	small {
		display: block;
		border-top: 1px solid;
		margin-top: 3rem;
		padding-block: 2rem;
		font-size: 1.4rem;
		line-height: 1.2;
	}
	@media screen and (min-width: 744px), print {
		width: calc(100% - var(--pc-base-padding) * 2);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.logo {
			width: 30rem;
			margin-left: 1.5rem;
		}
		nav {
			width: 85rem;
			.gnav {
				display: flex;
				flex-wrap: wrap;
				gap: 6rem 0;
				a {
					display: block;
					width: fit-content;
					&[target] {
						display: flex;
						align-items: center;
						gap: 1rem;
						&::after {
							content: "";
							display: block;
							width: 1.8rem;
							height: 1.8rem;
							background: url(../img/ico-blank.svg) no-repeat 50%;
							background-size: 100%;
						}
					}
				}
				& > li:nth-child(4n + 1) {
					width: calc(300 / 850 * 100%);
				}
				& > li:nth-child(4n + 2) {
					width: calc(220 / 850 * 100%);
				}
				& > li:nth-child(3) {
					width: calc(190 / 850 * 100%);
				}
				& > li:not(.other) {
					font-size: 1.5rem;
				}
				& > li > a {
					margin-bottom: .5rem;
					font-weight: var(--font-weight-bold);
					font-size: 1.8rem;
					& + a {
						margin-top: 3rem;
					}
				}
				.sub li {
					margin-top: .5rem;
				}
				.other dt {
					margin-bottom: .8rem;
					font-weight: var(--font-weight-bold);
				}
			}
		}
		.pmark {
			width: 100%;
		}
		small {
			width: 100%;
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		padding-top: 5rem;
		.logo {
			width: 20rem;
		}
		nav {
			margin-top: 2rem;
			margin-inline: var(--sp-base-padding);
			.gnav {
				display: flex;
				flex-direction: column;
				gap: 2rem;
				a {
					display: block;
					width: fit-content;
					&[target] {
						display: flex;
						align-items: center;
						gap: 1rem;
						&::after {
							content: "";
							display: block;
							width: 1.6rem;
							height: 1.6rem;
							background: url(../img/ico-blank.svg) no-repeat 50%;
							background-size: 100%;
						}
					}
				}
				& > li > a {
					margin-bottom: .5rem;
					font-weight: var(--font-weight-bold);
					font-size: 1.5rem;
					& + a {
						margin-top: 2rem;
					}
				}
				.sub li {
					margin-top: .5rem;
				}
				.other dt {
					margin-bottom: .8rem;
					font-weight: var(--font-weight-bold);
				}
			}
		}
		.pmark {
			margin-top: 4rem;
			font-size: 1rem;
			img {
				width: 6rem;
			}
		}
		small {
			font-size: 1.1rem;
		}
	}
}
/*
#pagetop {
	position: fixed;
	right: 6rem;
	bottom: 6rem;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 8rem;
	height: 8rem;
	padding-top: 1.2rem;
	background: var(--gradient-orange);
	border-radius: 100%;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1.6;
	text-decoration: none;
	transition: opacity .6s;
	opacity: 0;
	pointer-events: none;
	z-index: 500;
	&::after {
		content: "";
		position: absolute;
		inset: 2rem 0;
		width: 1.8rem;
		height: 1.8rem;
		margin-inline: auto;
		background: url(../img/ico-pagetop.svg) no-repeat 50%;
		background-size: 100%;
	}
	&.-show {
		pointer-events: auto;
		opacity: 1;
	}
	@media (hover) {
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background: var(--gradient-orange);
			border-radius: 100%;
			mix-blend-mode: multiply;
			opacity: 0;
			z-index: -1;
		}
		&:hover::before {
			opacity: 1;
		}
	}
	@media print {
		display: none;
	}
	@media screen and (max-width: 743px) {
		right: 2rem;
		bottom: 2rem;
	}
}
*/

/* container
====================================================================== */
#container {
	position: relative;
	overflow: clip;
}


/* ===================================================================================================================

	パーツ

============================================================================= */

/* ico
====================================================================== */
.ico {
	.in1 {
		animation: icoMove 5s ease-in-out infinite;
	}
	.in2 {
		animation: icoRotate 6s ease-in-out infinite;
	}
	.in3 {
		animation: icoScale 4s ease-in-out infinite;
	}
	&.-ico2 {
		.in1 {
			animation-duration: 6s;
			animation-delay: -2s;
		}
		.in2 {
			animation-duration: 7s;
			animation-delay: -3s;
		}
		.in3 {
			animation-duration: 5s;
			animation-delay: -3s;
		}
	}
	&.-ico3 {
		.in1 {
			animation-duration: 7s;
			animation-delay: -4s;
		}
		.in2 {
			animation-duration: 8s;
			animation-delay: -4s;
		}
		.in3 {
			animation-duration: 6s;
			animation-delay: -3s;
		}
	}
}
@keyframes icoMove {
	0%, 100% {
		transform: translate(-8px, 4px);
	}
	50% {
		transform: translate(6px, -6px);
	}
}
@keyframes icoRotate {
	0%, 100% {
		transform: rotate(-2deg);
	}
	50% {
		transform: rotate(2deg);
	}
}
@keyframes icoScale {
	0%, 100% {
		transform: scale(0.97, 1.02);
	}
	50% {
		transform: scale(1.02, 0.96);
	}
}

/* bottom_contact
====================================================================== */
.bottom_contact {
	padding: 12rem var(--pc-base-padding);
	background-color: #fff;
	a {
		overflow: hidden;
		position: relative;
		display: block;
		text-align: center;
		max-width: var(--base-width-l);
		margin-inline: auto;
		padding-block: 11rem 12rem;
		background: var(--bg-base) url(../img/page-bg.png) 50%;
		background-size: 20rem;
		border-radius: 2rem;
		text-decoration: none;
		z-index: 1;
		.title {
			font-size: 6rem;
			line-height: 1;
			font-weight: 900;
			--ls: 0;
			.maru {
				margin-right: -0.5em;
			}
		}
		.lead {
			margin-top: 4rem;
			font-size: 2.4rem;
			line-height: 1.6;
			font-weight: 900;
		}
		.eng {
			margin-top: 6rem;
			margin-bottom: 2rem;
			font-size: 4rem;
			line-height: 1.5;
			&::after {
				content: "";
				display: block;
				width: 0;
				height: 3rem;
				margin: 2rem auto 0;
				border-left: 2px solid var(--color-theme);
			}
		}
		.arrow_btn {
			margin-inline: auto;
			font-size: 1.8rem;
		}
		.-eng1 {
			top: -3rem;
			left: calc(170 / 1400 * 100%);
		}
		.-eng2 {
			top: calc(50% - var(--eng-height) / 2);
			right: calc(10 / 1400 * 100%);
		}
		.-eng3 {
			bottom: -3rem;
			left: calc(70 / 1400 * 100%);
		}
		.ico {
			position: absolute;
			z-index: -1;
			&.-ico1 {
				width: 24rem;
				right: calc(50% + (108rem - 140rem / 2));
				bottom: calc(50% - 7rem);
			}
			&.-ico2 {
				width: 48.4rem;
				right: calc(50% + (96rem - 140rem / 2));
				top: calc(50% + 13rem);
			}
			&.-ico3 {
				width: 42rem;
				left: calc(50% + 34.6rem);
				top: calc(50% - 24rem);
				img {
					transform: rotate(90deg);
				}
			}
		}
		@media (hover) {
			&:hover {
				opacity: 0.7;
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding: 3rem var(--sp-base-padding);
		a {
			padding-block: 4rem 10rem;
			background-size: 10rem;
			border-radius: 1rem;
			.title {
				font-size: 3rem;
				line-height: 1.5;
			}
			.lead {
				margin-top: 2rem;
				font-size: 1.6rem;
			}
			.eng {
				margin-top: 3rem;
				margin-bottom: 1rem;
				font-size: 2.4rem;
				&::after {
					height: 2rem;
					margin-block: 1rem;
				}
			}
			.arrow_btn {
				font-size: 1.4rem;
			}
			.ico {
				transform: scale(0.5);
				max-width: none;
				&.-ico1 {
					right: 58%;
					bottom: 25%;
				}
				&.-ico2 {
					right: 4%;
					top: 76%;
				}
				&.-ico3 {
					transform: scale(0.45);
					left: 41%;
					top: 10%;
				}
			}
		}
	}
}

/* breadcrumbs
====================================================================== */
.breadcrumbs {
	background-color: #fff;
	border-top: 1px solid #dddddd;
	font-size: 1.2rem;
	line-height: 1.8;
	li:not(:last-child) {
		&::after {
			content: "-";
			padding-inline: .2em;
		}
	}
	a:not([href]) {
		color: #acacac;
	}
	@media screen and (min-width: 744px), print {
		ol {
			max-width: var(--base-width-l);
			margin-inline: auto;
			padding: 1.4rem 1.5rem;
			li {
				display: inline;
			}
		}
	}
	@media screen and (max-width: 743px) {
		overflow-x: auto;
		ol {
			display: flex;
			white-space: nowrap;
			padding-block: 0.8rem;
			padding-left: var(--sp-base-padding);
			li {
				display: flex;
				&::after {
					padding-inline: .6em;
				}
				&:last-child {
					padding-right: var(--sp-base-padding);
				}
			}
		}
	}
}

/* bg_eng
====================================================================== */
.bg_eng {
	--eng-height: 21rem;
	position: absolute;
	color: #fff;
	font-size: 30rem;
	font-style: italic;
	font-weight: 900;
	line-height: var(--eng-height);
	z-index: -1;
	white-space: nowrap;
	filter: blur(1rem);
	--ls: .04em;
	&.-m {
		font-size: 24rem;
	}
	@media screen and (max-width: 743px) {
		font-size: 20rem;
		&.-m {
			font-size: 18rem;
		}
	}
}

/* link_arrow
====================================================================== */
.link_arrow {
	display: block;
	position: relative;
	width: 2.4rem;
	height: 2.4rem;
	background-color: #fff;
	border-radius: 100%;
	transition: background-color var(--transition);
	&::after {
		content: "";
		position: absolute;
		inset: 0 0 0 5%;
		width: .5rem;
		height: .7rem;
		margin: auto;
		background-color: #003968;
		clip-path: var(--clip-triangle-right);
		transition: background-color var(--transition);
	}
	&.-bg-gray {
		background-color: var(--bg-base);
	}
	&.-bg-dark {
		background-color: var(--color-theme);
		&::after {
			background-color: #fff;
		}
	}
	&.-abs {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin-block: auto;
	}
	&.-down {
		transform: rotate(90deg);
	}
	@media (hover) {
		:where(a,button):hover &.-hv {
			background-color: var(--color-theme);
			&::after {
				background-color: #fff;
			}
		}
	}
}

/* page_title
====================================================================== */
.page_title {
	padding-top: 11rem;
	margin-bottom: 6rem;
	.eng {
		margin-bottom: 2rem;
		font-size: 10rem;
		line-height: 1;
	}
	.title {
		position: relative;
		padding-left: 4.8rem;
		font-size: 2.4rem;
		line-height: 1.5;
		font-weight: var(--font-weight-bold);
		&::before {
			content: "";
			position: absolute;
			top: calc(.5lh - 1px);
			left: 0;
			width: 3rem;
			border-top: 2px solid var(--title-line-color, var(--color-theme));
		}
	}
	&.-white {
		--title-line-color: #fff;
		color: #fff;
	}
	@media screen and (min-width: 744px), print {
		width: var(--base-width-l);
		max-width: calc(100% - var(--pc-base-padding) * 2);
		margin-inline: auto;
	}
	@media screen and (max-width: 743px) {
		padding-top: 8rem;
		margin-bottom: 4rem;
		margin-inline: var(--sp-base-padding);
		.eng {
			margin-bottom: 1.2rem;
			font-size: 5rem;
			line-height: 1.1;
		}
		.title {
			padding-left: 3rem;
			font-size: 1.6rem;
			&::before {
				width: 2rem;
			}
		}
		&.-white {
			--title-line-color: #fff;
			color: #fff;
		}
	}
}

/* title
====================================================================== */
.eng_title {
	margin-bottom: 6rem;
	.eng {
		margin-bottom: 3rem;
		font-size: 10rem;
		line-height: 1;
	}
	.title {
		position: relative;
		padding-left: 4.8rem;
		font-size: 2.6rem;
		line-height: 1.5;
		font-weight: 900;
		&::before {
			content: "";
			position: absolute;
			top: calc(50% - 1px);
			left: 0;
			width: 3rem;
			border-top: 2px solid var(--title-line-color, var(--color-theme));
		}
	}
	&.-white {
		--title-line-color: #fff;
		color: #fff;
	}
	@media screen and (min-width: 744px), print {
		max-width: var(--base-width-l);
		margin-inline: auto;
	}
	@media screen and (max-width: 743px) {
		margin-bottom: 4rem;
		.eng {
			margin-bottom: 1.2rem;
			font-size: 5rem;
			line-height: 1.1;
		}
		.title {
			padding-left: 3rem;
			font-size: 1.6rem;
			&::before {
				width: 2rem;
			}
		}
		&.-white {
			--title-line-color: #fff;
			color: #fff;
		}
	}
}
.eng_s_title {
	.eng {
		margin-bottom: 3rem;
		font-size: 8rem;
		line-height: 1;
	}
	.title {
		font-size: 2rem;
		line-height: 1.5;
	}
	@media screen and (max-width: 743px) {
		.eng {
			margin-bottom: 1.2rem;
			font-size: 4rem;
		}
		.title {
			font-size: 1.6rem;
		}
	}
}
.line_title {
	--rate: 1;
	@media screen and (max-width: 743px) {
		--rate: calc(13 / 16);
	}
	position: relative;
	padding-left: calc(5rem * var(--rate));
	margin-bottom: calc(3rem * var(--rate));
	font-size: calc(2.4rem * var(--rate));
	line-height: 1.6;
	&::before {
		content: "";
		position: absolute;
		top: 0.5lh;
		left: 0;
		width: calc(3rem * var(--rate));
		border-top: 2px solid var(--color-theme, #1F3CB0);
	}
}


/* works_filter
====================================================================== */
.works_filter_wrap {
	@media screen and (min-width: 744px), print {
		position: relative;
		max-width: var(--base-width);
		margin-inline: auto;
		margin-top: calc(-6rem - 4.6rem);
	}
	@media screen and (max-width: 743px) {
		margin-top: -2rem;
		margin-inline: var(--sp-base-padding);
		&:has(.-single) {
			margin-top: calc(-4rem - 4.6rem);
		}
	}
}
.works_filter {
	position: relative;
	display: flex;
	gap: 3rem;
	z-index: 3;
	& > li {
		position: relative;
		width: 18rem;
		.active {
			position: relative;
			display: block;
			width: 100%;
			height: 4.6rem;
			padding-right: 2.4rem;
			font-size: 1.6rem;
			font-weight: var(--font-weight-bold);
			text-align: left;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			&::after {
				content: "";
				position: absolute;
				inset: auto 0 0;
				border-bottom: 1px solid #000;
				transition: opacity .05s .25s linear;
			}
			.link_arrow {
				transform: rotate(90deg);
				transition: transform var(--transition), background-color var(--transition);
			}
			&.-open {
				color: var(--color-theme);
				&::after {
					opacity: 0;
					transition-delay: 0s;
				}
				.link_arrow {
					transform: rotate(270deg);
					background-color: var(--color-theme);
					&::after {
						background-color: #fff;
					}
				}
			}
			@media (hover) {
				&:hover {
					color: var(--color-theme);
				}
			}
		}
		.filter_dropdown {
			position: absolute;
			top: 100%;
			left: 0;
			width: 120%;
			overflow: hidden;
			height: 0;
			border-radius: .4rem;
			transition: height var(--transition);
			z-index: 3;
			.filter_options {
				width: fit-content;
				min-width: 18rem;
				padding-block: 1.5rem;
				background-color: var(--color-theme);
				border-radius: .4rem;
				input {
					display: none;
				}
				button, label, a {
					position: relative;
					display: block;
					min-width: 100%;
					padding: 1rem 2rem 0.8rem 3rem;
					text-align: left;
					font-size: 1.4rem;
					line-height: 1.5;
					font-weight: var(--font-weight-bold);
					color: #fff;
					text-decoration: none;
					transition: background-color var(--transition);
					&::before {
						content: "";
						position: absolute;
						top: calc((1rem + .5lh) - .7rem / 2);
						left: 2rem;
						width: .5rem;
						height: .7rem;
						background-color: #fff;
						clip-path: var(--clip-triangle-right);
					}
					&.is-active {
						background-color: rgba(255, 255, 255, 0.2);
					}
					@media (hover) {
						&:hover {
							background-color: rgba(255, 255, 255, 0.2);
						}
					}
				}
				input:checked + label {
					background-color: rgba(255, 255, 255, 0.2);
				}
				&.-half {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					a {
						padding-left: 2.5rem;
						&::before {
							left: 1.5rem;
						}
					}
				}
			}
		}
		.recently_link {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 4.2rem;
			margin-top: 0.2rem;
			background-color: var(--recently-link-bg, #fff);
			font-size: 1.6rem;
			font-weight: var(--font-weight-bold);
			text-align: center;
			text-decoration: none;
			border-radius: 0.6rem;
			&::after {
				content: "";
				position: absolute;
				inset: 0 auto 0 1rem;
				width: .5rem;
				height: .7rem;
				margin-block: auto;
				background-color: #003968;
				clip-path: var(--clip-triangle-left);
			}
			@media (hover) {
				&:hover {
					background-color: var(--color-theme);
					color: #fff;
					&::after {
						background-color: #fff;
					}
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		width: fit-content;
		margin-left: auto;
		& > li {
			&:has(li:nth-child(12)) {
				.filter_dropdown {
					width: 300%;
					.filter_options {
						display: flex;
						flex-wrap: wrap;
						li {
							width: 25%;
						}
					}
					&.-tax-works_scope {
						.filter_options li {
							width: auto;
						}
					}
				}
				&:nth-last-child(1) {
					.filter_dropdown {
						right: 0;
						left: auto;
					}
				}
				&:nth-last-child(2) {
					.filter_dropdown {
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		flex-wrap: wrap;
		gap: 2rem;
		& > li {
			width: calc(50% - 1rem);
			.filter_dropdown {
				width: calc(200% + 2rem);
				width: calc(200%);
				pointer-events: none;
				.filter_options {
					min-width: calc(50% - 1rem);
					min-width: calc(50%);
					width: fit-content;
					padding-block: .5rem;
					pointer-events: auto;
					button, label {
						padding: 1rem 1rem 0.8rem 2rem;
						white-space: wrap;
						&::before {
							left: 1rem;
						}
					}
				}
			}
			&:nth-child(2n) {
				.filter_dropdown {
					right: 0;
					left: auto;
					.filter_options {
						margin-left: auto;
					}
				}
			}
			&:has(li:nth-child(12)) {
				.filter_dropdown {
					width: calc(200%);
					.filter_options {
						display: flex;
						flex-wrap: wrap;
						li {
							width: 33.33%;
						}
					}
					&.-tax-works_scope {
						.filter_options li {
							width: auto;
						}
					}
				}
			}
		}
		&.-single {
			width: fit-content;
			margin-left: auto;
			margin-right: 0;
			width: 40%;
			& > li {
				width: 100%;
				.filter_dropdown {
					width: 100%;
					.filter_options {
						padding-block: .5rem;
						button, label {
							padding: 1rem 1rem 0.8rem 2rem;
							white-space: wrap;
							&::before {
								left: 1rem;
							}
						}
					}
				}
			}
		}
	}
}
.-page-index {
	.works_filter {
		.recently_link {
			&::after {
				left: auto;
				right: 1rem;
				transform: rotate(180deg);
			}
		}
	}
}

/* works_list_item
====================================================================== */
.works_list_item {
	a {
		position: relative;
		display: block;
		text-decoration: none;
		color: var(--color-base);
		.item_img {
			overflow: hidden;
			margin-bottom: 2rem;
			border-radius: 1rem;
			aspect-ratio: 630 / 330;
			&.-noimage {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				img {
					width: 70%;
				}
			}
		}
		.item_body {
			position: relative;
		}
		.item_title {
			font-size: 3rem;
			font-weight: 700;
			line-height: 1.6;
			margin-right: 4rem;
		}
		.item_categories {
			display: flex;
			flex-wrap: wrap;
			margin-top: 1.5rem;
			font-size: 1.6rem;
			line-height: 1.4;
			font-weight: 700;
			& > li:not(:last-child)::after {
				content: "｜";
				margin-inline: 1em;
			}
		}
		.item_tags {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem 0;
			margin-top: 2rem;
			font-size: 1.5rem;
			line-height: 1.4;
			& > li:not(:last-child)::after {
				content: "／";
			}
		}
		.link_arrow {
			margin-top: 1rem;
		}
		.index_works_list & {
			.item_img {
				aspect-ratio: 600 / 380;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		a {
			.index_works_list & {
				.item_img {
					border-radius: 1.8rem;
				}
				.item_categories {
					font-size: 1.8rem;
				}
				.item_tags {
					font-size: 1.4rem;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		a {
			.item_img {
				margin-bottom: 1.5rem;
				border-radius: 1rem;
			}
			.item_title {
				font-size: 2rem;
			}
			.item_categories {
				font-size: 1.3rem;
			}
			.item_tags {
				margin-top: 1.5rem;
				font-size: 1.2rem;
			}
			.link_arrow {
				margin-top: 0.4rem;
			}
		}
	}
}

/* slide_arrow
====================================================================== */
.slide_arrow {
	position: relative;
	width: 6rem;
	height: 6rem;
	background-color: #fff;
	border-radius: 100%;
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		margin-inline: auto;
		width: 2rem;
		height: 2rem;
		border-top: 2px solid var(--color-theme);
		border-right: 2px solid var(--color-theme);
		transform-origin: 100% 0;
		transform: rotate(45deg);
	}
	&.-prev {
		transform: rotate(180deg);
	}
	&.-bg-gray {
		background-color: #F5F5F5;
	}
	@media (hover) {
		&:hover {
			background-color: var(--color-theme);
			&::after {
				border-color: #fff;
			}
		}
	}
	@media screen and (max-width: 743px) {
		width: 4rem;
		height: 4rem;
		&::after {
			width: 1.5rem;
			height: 1.5rem;
		}
	}
}


/* box_btn
====================================================================== */
.box_btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	width: 18rem;
	height: 4.2rem;
	margin-top: 0.2rem;
	background-color: #fff;
	font-size: 1.6rem;
	font-weight: var(--font-weight-bold);
	text-align: center;
	text-decoration: none;
	border-radius: 0.6rem;
	&::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 1rem;
		width: .5rem;
		height: .7rem;
		margin-block: auto;
		background-color: #003968;
		clip-path: var(--clip-triangle-left);
	}
	@media (hover) {
		&:hover {
			background-color: var(--color-theme);
			color: #fff;
			&::after {
				background-color: #fff;
			}
		}
	}
}

/* box_large_btn
====================================================================== */
.box_large_btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	width: 45.6rem;
	min-height: 8.6rem;
	padding: 1rem 6rem 1rem 4rem;
	background: #fff;
	border: 1px solid #6F6F6F;
	border-radius: 1rem;
	text-align: center;
	text-decoration: none;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.4;
	.link_arrow {
		right: 2rem;
	}
	@media (hover) {
		&::after {
			content: "";
			position: absolute;
			inset: -1px;
			pointer-events: none;
			border: 2px solid var(--color-theme, #1F3CB0);
			border-radius: 1rem;
			opacity: 0;
			transition: opacity var(--transition);
		}
		&:hover {
			color: var(--color-theme);
			&::after {
				opacity: 1;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		&.-half {
			width: 50%;
		}
	}
	@media screen and (max-width: 743px) {
		width: 100%;
		min-height: 8rem;
		font-size: 1.6rem;
	}
}

/* arrow_btn
====================================================================== */
.arrow_btn {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 100%;
	width: 30rem;
	height: 6rem;
	border-bottom: 1px solid;
	color: var(--color-base);
	text-decoration: none;
	font-size: 2rem;
	line-height: 1.4;
	font-weight: var(--font-weight-bold);
	text-align: left;
	@media (hover) {
		&:hover,
		a:hover & {
			/* opacity: 0.5; */
			color: var(--color-theme);
		}
	}
	@media screen and (min-width: 744px), print {
		&.-s {
			font-size: 1.8rem;
		}
	}
	@media screen and (max-width: 743px) {
		width: 24rem;
		font-size: 1.6rem;
		margin-inline: auto;
	}
}
.arrow_btn_list {
	display: flex;
	flex-wrap: wrap;
	@media screen and (min-width: 744px), print {
		gap: 3rem 5rem;
		li {
			width: var((100% - 5rem * 2) / 3);
		}
	}
	@media screen and (max-width: 743px) {
		flex-direction: column;
		gap: 1rem;
		.arrow_btn {
			width: 90%;
		}
	}
}


/* inner_nav
====================================================================== */
.inner_nav {
	margin-top: 14rem;
	ul {
		display: flex;
		flex-wrap: wrap;
		gap: 3rem 5rem;
		li {
			width: calc((100% - 5rem * 4) / 5);
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
		ul {
			gap: 1rem 2rem;
			li {
				width: calc((100% - 2rem * 1) / 2);
			}
		}
	}
}


/* no_result
====================================================================== */
.no_result {
	margin-top: 10rem;
	text-align: center;
	font-size: 2rem;
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
		font-size: 1.6rem;
	}
}


/* acc
====================================================================== */
._acc {
	overflow: hidden;
	height: 0;
	transition: height var(--transition);
}

/* basic_dl_table
====================================================================== */
/*
.basic_dl_table {
	& > dl {
		display: flex;
		background-color: var(--bg-base);
		&:not(:last-child) {
			margin-bottom: 2px;
		}
		& > * {
			padding: 1.2rem 2.4rem;
		}
		& > dt {
			width: 24rem;
			display: flex;
			align-items: center;
			flex-shrink: 0;
			background-color: var(--color-lightblue);
			border-right: 2px solid #fff;
		}
		@media screen and (max-width: 743px) {
			& > * {
				padding: 1rem 1.6rem;
			}
			& > dt {
				@media screen and (max-width: 743px) {
					width: 11rem;
				}
			}
		}
	}
	&.-sp-vertical {
		@media screen and (max-width: 743px) {
			& > dl {
				display: block;
				& > * {
					padding: 1rem 2rem;
				}
				& > dt {
					width: auto;
				}
			}
		}
	}
}
*/


/* paragraph
====================================================================== */
.paragraph > * + * {
	margin-top: 1lh;
}
.paragraph.-m > * + * {
	margin-top: .7lh;
}

/* wp-pagenavi
====================================================================== */
.wp-pagenavi {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 16rem;
	& > * {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 4rem;
		height: 4rem;
		font-size: 2rem;
		text-decoration: none;
		font-family: var(--font-family-en);
		font-weight: var(--font-weight-semi);
	}
	.current {
		color: var(--color-theme);
		&::after {
			content: "";
			position: absolute;
			top: calc(50% + .8em);
			right: 0;
			left: 0;
			width: 2rem;
			border-top: 2px solid var(--color-theme);
			margin-inline: auto;
		}
	}
	.previouspostslink,
	.nextpostslink {
		position: relative;
		text-indent: -999em;
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			right: calc(50% - 1rem);
			width: 2rem;
			height: 2rem;
			transform-origin: 100% 0;
			transform: rotate(45deg);
			border-top: 2px solid var(--color-theme);
			border-right: 2px solid var(--color-theme);
		}
	}
	.previouspostslink {
		margin-right: 4rem;
		transform: scaleX(-1);
	}
	.nextpostslink {
		margin-left: 4rem;
	}
	@media (hover) {
		a.page:hover {
			color: var(--color-theme);
		}
		a.previouspostslink:hover,
		a.nextpostslink:hover {
			opacity: 0.5;
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
		& > * {
			width: 3rem;
			height: 3rem;
		}
		.extend {
			display: none;
		}
		.previouspostslink {
			margin-right: 2rem;
		}
		.nextpostslink {
			margin-left: 2rem;
		}
	}
}


/* ul / ol
====================================================================== */
.dot_li > li {
	position: relative;
	padding-left: 1em;
}
.dot_li > li::before {
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
	font-feature-settings: normal;
}

.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-theme);
	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.5em;
}
.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;
}


/* js-parallax
====================================================================== */
.js-parallax {
	--base-transform: translate3d(0, 0, 0);
	--parallax-y: 0px;
	--parallax-rotate: 0deg;

	transform: var(--base-transform) translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) rotate(calc(var(--parallax-rotate, 0deg) * -1));
	will-change: transform;
	&.-half {
		transform: var(--base-transform) translate3d(calc(var(--parallax-x, 0) * .5), calc(var(--parallax-y, 0) * -.5), 0) rotate(calc(var(--parallax-rotate) * -1));
	}
}

/* article_footer
====================================================================== */
.article_footer {
	position: relative;
	padding-block: 8.5rem 15rem;
	background: var(--bg-base) url(../img/page-bg.png) 50% 0;
	isolation: isolate;
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color:rgba(217, 217, 217, 0.4);
		mix-blend-mode: multiply;
		z-index: -1;
	}
	.nav {
		display: flex;
		margin-top: 4rem;
	}
	@media screen and (min-width: 744px), print {
		padding-inline: calc((100% - var(--base-width)) / 2);
		.nav .prev {
			margin-left: auto;
		}
	}
	@media screen and (max-width: 743px) {
		padding: 4rem var(--sp-base-padding) 6rem;
		.nav {
			flex-direction: column;
			gap: 2rem;
		}
	}
}


/* page_detail_box
====================================================================== */
.page_detail_box {
	--detail-box-pt: 12rem;
	--detail-box-plr: 14.5rem;
	--detail-box-bdrs: 2rem;
	max-width: var(--base-width);
	margin-inline: auto;
	background-color: #fff;
	border-radius: var(--detail-box-bdrs);
	margin-bottom: 16rem;
	padding: var(--detail-box-pt) var(--detail-box-plr) 16rem;
	/* &.-r10 {
		--detail-box-bdrs: 1rem;
	} */
	&:has(+ .page_detail_box) {
		margin-bottom: 12rem;
	}
	@media screen and (max-width: 743px) {
		--detail-box-pt: 4rem;
		--detail-box-plr: var(--sp-base-padding);
		--detail-box-bdrs: 1rem;
		margin-inline: 1rem;
		margin-bottom: 6rem;
		padding-bottom: 6rem;
		&:has(+ .page_detail_box) {
			margin-bottom: 3rem;
		}
	}
	.detail_box_lead {
		background-color: #e1e1e1;
		margin-inline: calc(var(--detail-box-plr) * -1);
		margin-block: 14rem;
		padding: 10rem var(--detail-box-plr);
		&:first-child {
			margin-top: calc(var(--detail-box-pt) * -1);
			border-radius: var(--detail-box-bdrs) var(--detail-box-bdrs) 0 0;
		}
		.interviewee {
			&:not(:first-child) {
				margin-top: 10rem;
				padding-top: 10rem;
				border-top: 1px solid;
			}
			li {
				display: flex;
				.ph {
					flex-shrink: 0;
					margin-right: 3rem;
					width: 14rem;
					height: 14rem;
					overflow: hidden;
					border-radius: 3rem;
					border: 2px solid #fff;
				}
				.txt {
					font-size: 1.2rem;
					line-height: 1.8;
					.post {
						line-height: 1.5;
						margin-bottom: 1rem;
					}
					.name {
						font-size: 2.2rem;
						line-height: 1.2;
						margin-bottom: 2rem;
					}
				}
			}
		}
		@media screen and (min-width: 744px), print {
			.interviewee {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 4rem;
				li {
					width: 44rem;
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-block: 6rem;
			padding: 4rem var(--sp-base-padding);
			.interviewee {
				display: flex;
				flex-direction: column;
				gap: 3rem;
				&:not(:first-child) {
					margin-top: 4rem;
					padding-top: 4rem;
				}
				li {
					.ph {
						margin-right: 2rem;
						width: 10rem;
						height: 10rem;
						overflow: hidden;
						border-radius: 2rem;
					}
					.txt {
						font-size: 1rem;
						line-height: 1.8;
						.post {
							margin-bottom: .2em;
						}
						.name {
							font-size: 1.6rem;
							margin-bottom: 1rem;
						}
					}
				}
			}
		}
	}
	.chapter_block {
		margin-bottom: 14rem;
		padding-bottom: 10rem;
		border-bottom: 1px solid;
		dt {
			font-size: 4.2rem;
			line-height: 1.2;
		}
		.chapter {
			font-size: 1.8rem;
			font-weight: var(--font-weight-bold);
			line-height: 1.8;
			li:not(:last-child) {
				margin-bottom: 0.6em;
			}
			a {
				width: fit-content;
				display: flex;
				text-decoration: none;
				gap: 0.4em;
				.num {
					flex-shrink: 0;
				}
			}
		}
		@media screen and (min-width: 744px), print {
			display: grid;
			grid-template-columns: 30rem 1fr;
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 6rem;
			padding-bottom: 6rem;
			dt {
				margin-bottom: 2rem;
				font-size: 3rem;
			}
			.chapter {
				font-size: 1.3rem;
			}
		}
	}
}
.page_detail_box_nav {
	padding-block: 9rem;
	@media screen and (max-width: 743px) {
		padding-block: 3rem 5rem;
	}
}

/* mov
====================================================================== */
@media screen {
	._mov_fadein {
		opacity: 0;
	}
	._mov_fadein._mov_showed {
		transition: opacity 1s linear;
		opacity: 1;
	}

	._mov_fadeup {
		opacity: 0;
		transform: translateY(6rem);
	}
	._mov_fadeup_s {
		opacity: 0;
		transform: translateY(3rem);
	}
	._mov_fadeup._mov_showed,
	._mov_fadeup_s._mov_showed,
	._mov_showed ._mov_fadeup {
		transition: transform .5s cubic-bezier(0.5, 1, 0.89, 1), opacity .3s linear;
		opacity: 1;
		transform: translateY(0);
	}

	._mov_fadeup_b {
		opacity: 0;
		transform: translateY(5rem);
	}
	._mov_fadeup_b._mov_showed {
		transition: transform .7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .7s linear;
		opacity: 1;
		transform: translateY(0);
	}

	._mov_fadeleft {
		opacity: 0;
		transform: translateX(-10rem);
	}
	._mov_fadeleft._mov_showed {
		transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		opacity: 1;
		transform: translateX(0);
	}

	._mov_faderight {
		opacity: 0;
		transform: translateX(10rem);
	}
	._mov_faderight._mov_showed {
		transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		opacity: 1;
		transform: translateX(0);
	}

	._mov_zoomin {
		opacity: 0;
		transform: scale(.2);
	}
	._mov_zoomin.-zomms {
		transform: scale(.6);
	}
	._mov_zoomin._mov_showed {
		transition: transform .6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .6s linear;
		opacity: 1;
		transform: scale(1);
	}

	._mov_zoomout {
		opacity: 0;
		transform: scale(1.3);
	}
	._mov_zoomout._mov_showed {
		transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		opacity: 1;
		transform: scale(1);
	}

	._mov_delay1 {
		transition-delay: .2s !important;
	}
	._mov_delay2 {
		transition-delay: .4s !important;
	}
	._mov_delay3 {
		transition-delay: .6s !important;
	}
	._mov_delay4 {
		transition-delay: .8s !important;
	}
	._mov_delay5 {
		transition-delay: 1s !important;
	}
	._mov_delay6 {
		transition-delay: .2s !important;
	}
	._mov_delay1s {
		transition-delay: .1s !important;
	}
	._mov_delay2s {
		transition-delay: .2s !important;
	}
	._mov_delay3s {
		transition-delay: .3s !important;
	}
	._mov_delay4s {
		transition-delay: .4s !important;
	}
	._mov_delay5s {
		transition-delay: .5s !important;
	}
	._mov_delay6s {
		transition-delay: .6s !important;
	}

	:where(._mov_fadeup:not(._mov_showed)[id]:not(style):not(script)),
	:where(._mov_fadeup:not(._mov_showed) [id]:not(style):not(script)) {
		scroll-margin-top: calc(var(--target-margin) + 6rem);
	}
}

/* ============================================================================

	インサイトについて

============================================================================= */
.about_main_graph {
	position: relative;
	.main_graph_inner {
		position: relative;
		width: 130rem;
		margin-inline: auto;
		padding-top: 13rem;
		display: flex;
		justify-content: space-between;
	}
	dl {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-weight: var(--font-weight-bold);
		&.level1 {
			height: 17rem;
		}
		&.level2 {
			height: 12.8rem;
		}
		&.level3 {
			height: 10.8rem;
		}
		&.level4 {
			height: 14rem;
		}
		&.level5 {
			height: 9.6rem;
		}
	}
	.side {
		position: relative;
		width: 26rem;
		font-size: 1.1rem;
		line-height: 1.6;
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			border-right: 1px solid var(--color-theme);
			pointer-events: none;
		}
		&::before,
		dl::before {
			content: "";
			position: absolute;
			left: 100%;
			width: 1rem;
			border-top: 1px solid var(--color-theme);
		}
		&::before {
			top: 0;
		}
		dl::before {
			bottom: 0;
		}
		dt {
			font-size: 1.8rem;
			line-height: 1.4;
			&::after {
				content: "";
				display: block;
				width: 1rem;
				margin: .8rem auto 1rem;
				border-top: 1px solid var(--color-theme);
			}
		}
	}
	.main {
		width: 98.2rem;
		color: #fff;
		.bg {
			position: relative;
			&::before {
				content: "";
				position: absolute;
				inset: auto -.9rem 0;
				height: 68rem;
				background: url(../img/about/graph_bg.svg) no-repeat 50% 100%;
				background-size: 100%;
				mix-blend-mode: multiply;
				z-index: -1;
			}
		}
		dt {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 12rem;
			height: 2.4rem;
			border: 1px solid;
			margin-inline: auto;
			margin-bottom: 1.6rem;
			font-size: 1.4rem;
			line-height: 1;
		}
		dd {
			line-height: 1.5;
			.s {
				display: block;
				margin-bottom: 0.5rem;
				font-size: 1.3rem;
				line-height: 1.8;
			}
		}
		.level1 {
			font-size: 2.4rem;
		}
		.level2 {
			font-size: 2.2rem;
		}
		.level3 {
			font-size: 2.8rem;
		}
		.level4 {
			font-size: 1.2rem;
			.value {
				display: flex;
				justify-content: center;
				gap: 1em;
				margin-bottom: 1rem;
				li {
					&::before {
						content: "○";
					}
				}
			}
		}
		.level5 {
			padding-top: 2rem;
			font-size: 1.2rem;
			color: #1F2B64;
			.dna {
				display: flex;
				li:not(:last-child)::after {
					content: "/";
					margin-inline: .3em;
				}
			}
		}
	}
	.bg_logo {
		position: absolute;
		width: 200rem;
		left: 0;
		top: 3rem;
		filter: blur(10px);
		z-index: -2;
		img {
			width: 100%;
		}
	}
	@media screen and (min-width: 744px), print {
		.main_graph_slide {
			overflow: visible !important;
		}
		.main_graph_inner {
			right: 3rem;
		}
	}
	@media screen and (max-width: 743px) {
		.main_graph_slide {
			overflow-x: auto;
			padding-bottom: 5rem;
		}
		.main_graph_wrap {
			width: 90rem;
			height: 53.1rem;
		}
		.main_graph_inner {
			transform-origin: 0 0;
			transform: scale(calc(900 / 1300));
		}
		.bg_logo {
			width: 100rem;
		}
	}
}
@media screen {
	.about_main_graph {
		dl {
			opacity: 0;
			transform: translateY(3rem);
		}
		.side {
			&::after,
			&::before {
				opacity: 0;
				transform: translateY(3rem);
			}
		}
		.main {
			.bg {
				&::before {
					opacity: 0;
					transform: translateY(4rem);
				}
			}
		}
		&._mov_showed {
			dl {
				transition: transform .3s ease-out, opacity .3s ease;
				opacity: 1;
				transform: translateY(0);
				&.level1 {
					transition-delay: .2s;
				}
				&.level2 {
					transition-delay: .2s;
				}
				&.level3 {
					transition-delay: .3s;
				}
				&.level4 {
					transition-delay: .4s;
				}
				&.level5 {
					transition-delay: .5s;
				}
			}
			.side {
				&::after,
				&::before {
					transition: transform .3s .2s ease-out, opacity .3s .2s ease;
					opacity: 1;
					transform: translateY(0);
				}
			}
			.main {
				.bg {
					&::before {
						transition: transform .4s ease-out, opacity .3s ease;
						opacity: 1;
						transform: translateY(0);
					}
				}
			}
		}
	}
}

.about_purpose {
	position: relative;
	margin-top: 14rem;
	padding-bottom: 18rem;
	.purpose {
		margin-top: 8rem;
		text-align: center;
		font-size: 2.6rem;
		line-height: 2.2;
		font-weight: var(--font-weight-bold);
		.copy {
			margin-bottom: 5rem;
			font-size: 6rem;
			line-height: 1.2;
			font-weight: 900;
			--ls: 0;
			.maru {
				margin-right: -0.5em;
			}
		}
		.lead {
			margin-bottom: 5rem;
			font-size: 4.2rem;
			line-height: 1.8;
			font-weight: 900;

		}
	}
	.-eng1 {
		top: 0;
		right: 0;
	}
	.-eng2 {
		top: calc(50% - var(--eng-height) / 2);
		left: 0;
	}
	.-eng3 {
		bottom: 0;
		right: 0;
	}
	.ico {
		position: absolute;
		z-index: -1;
		&.-ico1 {
			width: 24rem;
			top: -4rem;
			left: calc(50% + 47rem);
		}
		&.-ico2 {
			width: 45rem;
			bottom: -4rem;
			left: calc(50% + 36rem);
		}
		&.-ico3 {
			width: 45rem;
			top: 28rem;
			right: calc(50% + 47rem);
			img {
				transform: rotate(90deg);
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
		padding-bottom: 10rem;
		.purpose {
			margin-top: 5rem;
			font-size: 1.8rem;
			line-height: 2;
			.copy {
				margin-bottom: 3rem;
				font-size: 5rem;
				line-height: 1.4;
			}
			.lead {
				margin-bottom: 3rem;
				font-size: 2.6rem;

			}
		}
		.bg_eng {
			font-size: 16rem;
		}
		.ico {
			transform: scale(.5);
			&.-ico1 {
				top: -10rem;
				left: 65%;
			}
			&.-ico2 {
				bottom: -4rem;
				left: 30%;
			}
			&.-ico3 {
				top: 2rem;
				right: 53%;
			}
		}
	}
}
.about_vision {
	position: relative;
	margin-top: 10rem;
	padding-bottom: 15rem;
	.bg {
		position: absolute;
		top: 45%;
		left: 50%;
		width: 140rem;
		height: 126.2rem;
		filter: blur(7.5px);
		transform: translate(-50%, -50%);
		z-index: -1;
	}
	.vision {
		margin-top: 4rem;
		text-align: center;
		font-size: 2.6rem;
		line-height: 2.2;
		font-weight: var(--font-weight-bold);
		.s {
			margin-bottom: 3rem;
			font-size: 3rem;
			font-weight: 900;
		}
		.lead {
			margin-bottom: 5rem;
			font-size: 6rem;
			line-height: 1.6;
			font-weight: 900;
			._ff_en {
				margin-inline: .1em;
				font-size: calc(76 / 60 * 100%);
				vertical-align: -.05em;
			}
		}
		.lead ~ p + p {
			margin-top: 1lh;
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 5rem;
		padding-bottom: 10rem;
		.bg {
			top: 40%;
			width: calc(80 / 140 * 140rem);
			height: calc(80 / 140 * 126.2rem);
			filter: blur(4px);
		}
		.vision {
			margin-top: 5rem;
			font-size: 1.8rem;
			line-height: 2;
			.s {
				margin-bottom: 2rem;
				font-size: 1.8rem;
			}
			.lead {
				margin-bottom: 3rem;
				margin-inline: -2rem;
				font-size: 2.8rem;
			}
		}
	}
}
.about_philosophy {
	background-color: #fff;
	padding-top: 15rem;
	padding-bottom: 16rem;
	isolation: isolate;
	@media screen and (max-width: 743px) {
		padding-top: 6rem;
		padding-bottom: 10rem;
	}
	.philosophy {
		position: relative;
		margin-top: 12rem;
		font-size: 2.2rem;
		line-height: 2.2;
		font-weight: var(--font-weight-bold);
		.bg {
			position: absolute;
			inset: auto 0 0;
			z-index: -1;
			& > div {
				width: 90rem;
				height: 90rem;
				margin-inline: auto;
				background: url(../img/logo-mark.svg) no-repeat 50%;
				background-size: 100%;
				opacity: 0.1;
				filter: blur(10px);
			}
		}
		header {
			margin-bottom: 5rem;
			.eng {
				margin-bottom: 4rem;
				font-size: 9rem;
				line-height: 1;
			}
			h3 {
				background-color: var(--color-theme);
				color: #fff;
				text-align: center;
				padding-bottom: 0.2em;
				font-size: 3rem;
				line-height: 1.6;
			}
		}
		.cross {
			width: 30rem;
			height: 12rem;
			transform: rotate(-45deg);
			&::before,
			&::after {
				content: "";
				position: absolute;
			}
			&::before {
				inset: 50% 0 auto;
				border-top: 2px solid;
			}
			&::after {
				inset: 0 auto 0 50%;
				border-left: 2px solid;
			}
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			justify-content: space-between;
			header {
				width: 43.6rem;
				white-space: nowrap;
			}
			section:last-child {
				margin-top: 12.5rem;
			}
			.cross {
				position: absolute;
				left: 0;
				right: 0;
				top: 14rem;
				margin-inline: auto;
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 6rem;
			font-size: 1.7rem;
			.bg {
				inset: 50% auto auto 50%;
				& > div {
					width: 80rem;
					height: 80rem;
					transform: translate(-50%, -50%);
				}
			}
			header {
				margin-bottom: 2rem;
				.eng {
					margin-bottom: 1.6rem;
					font-size: 4.4rem;
				}
				h3 {
					width: fit-content;
					padding: 0.1em .5em .2em;
					font-size: 2rem;
				}
			}
			section:last-child {
				width: fit-content;
				margin-left: auto;
			}
			.cross {
				margin-block: 2rem 6rem;
				margin-inline: auto;
				transform: scale(.8) rotate(-45deg);
			}
		}
	}
	.value {
		margin-top: 12rem;
		padding: 8rem;
		border: 1px solid;
		border-radius: 1rem;
		header {
			.eng {
				font-size: 5.4rem;
				line-height: 1.5;
			}
			h3 {
				margin-top: 1rem;
				font-size: 2rem;
			}
		}
		.value_list {
			font-size: 2rem;
			line-height: 1.5;
			font-weight: var(--font-weight-bold);
			counter-reset: value;
			li {
				position: relative;
				padding-left: 5rem;
				counter-increment: value;
				&::before {
					content: counter(value, decimal-leading-zero) ".";
					position: absolute;
					top: 0;
					left: 0;
					font-family: var(--font-family-outfit);
					font-weight: 500;
					text-decoration-line: underline;
					text-decoration-style: solid;
					text-decoration-thickness: 1px;
					text-underline-offset: .2em;
					font-variant-numeric: tabular-nums;
					color: var(--color-theme);
				}
			}
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			justify-content: space-between;
			header {
				position: relative;
				top: -1rem;
				left: -1rem;
			}
			.value_list {
				display: flex;
				gap: 5rem;
				li + li {
					margin-top: 1.5em;
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 6rem;
			padding: 3rem;
			header {
				margin-bottom: 3rem;
				.eng {
					font-size: 4rem;
				}
				h3 {
					margin-top: 0;
					font-size: 1.6rem;
				}
			}
			.value_list {
				font-size: 1.6rem;
				li {
					padding-left: 4.4rem;
					margin-top: 1.2em;
				}
			}
		}
	}
}
.about_dna {
	position: relative;
	background-color: #fff;
	padding-inline: 2rem;
	a {
		display: block;
		text-decoration: none;
	}
	.main {
		background-color: var(--color-theme);
		color: #fff;
		border-radius: 2rem;
		& > * {
			position: relative;
			z-index: 3;
		}
		header {
			margin-bottom: 8rem;
			font-size: 2rem;
			line-height: 1.5;
			.eng {
				margin-bottom: 3rem;
				font-size: 8rem;
				line-height: 1;
			}
		}
		.title {
			span {
				display: block;
				width: fit-content;
				padding: 0 2rem;
				background-color: #fff;
				color: var(--color-base);
				font-size: 4rem;
				line-height: 1.5;
				font-weight: var(--font-weight-bold);
				&:last-child {
					padding-bottom: 0.1em;
				}
			}
		}
		.more {
			margin-top: 5rem;
			color: #fff !important;
		}
	}
	.ph {
		overflow: hidden;
		border-radius: 2rem;
	}
	@media screen and (min-width: 744px), print {
		padding-bottom: 6rem;
		.main {
			width: calc(50% + 12rem);
			height: 70rem;
			padding: 11rem 0 0 13rem;
			.more {
				width: 26rem;
			}
		}
		.ph {
			position: absolute;
			top: 6rem;
			right: 2rem;
			width: calc(50% + 12rem);
			height: 70rem;
		}
	}
	@media screen and (max-width: 743px) {
		padding-inline: var(--sp-base-padding);
		padding-bottom: 3rem;
		.main {
			margin-left: calc(var(--sp-base-padding) * -1);
			padding: 4rem var(--sp-base-padding) 8rem;
			border-radius: 0 1rem 1rem 0;
			header {
				margin-bottom: 4rem;
				font-size: 1.6rem;
				.eng {
					margin-bottom: 1rem;
					font-size: 5rem;
					line-height: 1;
				}
			}
			.title {
				span {
					padding: 0 1rem;
					font-size: 2rem;
				}
			}
			.more {
				margin-top: 2rem;
				margin-left: 0;
			}
		}
		.ph {
			width: 100%;
			margin: -4rem calc(var(--sp-base-padding) * -1) 0 auto;
			border-radius: 1rem 0 0 1rem;
		}
	}
}

/* ============================================================================

	インサイトについて｜マーケティングサービス

============================================================================= */
.service_main_wrap {
	position: relative;
	padding-block: 8rem 18rem;
	.service_main {
		position: relative;
		width: 130rem;
		margin-inline: auto;
		font-size: 2.6rem;
		line-height: 2.2;
		font-weight: var(--font-weight-bold);
		.copy {
			display: flex;
			flex-direction: row-reverse;
			justify-content: center;
			font-size: 9rem;
			line-height: 1.8;
			font-weight: 900;
			& > span {
				writing-mode: vertical-rl;
				vertical-align: middle;
			}
		}
		.lead {
			margin-bottom: 5rem;
			font-size: 4.2rem;
			line-height: 1.8;
			font-weight: 900;
		}
	}
	.-eng1 {
		top: -6rem;
		left: calc(700 / 1600 * 100%);
	}
	.-eng2 {
		top: calc(50% - var(--eng-height) / 2 - 2rem);
		right: calc(500 / 1600 * 100%);
	}
	.-eng3 {
		bottom: 0;
		left: calc(360 / 1600 * 100%);
	}
	@media screen and (min-width: 744px), print {
		.service_main {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10rem;
			white-space: nowrap;
		}
	}
	@media screen and (max-width: 743px) {
		padding: 2rem var(--sp-base-padding) 12rem;
		.service_main {
			width: auto;
			font-size: 1.8rem;
			line-height: 2;
			.copy {
				width: 100%;
				font-size: 5rem;
				line-height: 1.8;
			}
			.txt {
				text-align: center;
			}
			.lead {
				margin-bottom: 3rem;
				font-size: 2.6rem;
			}
		}
		.-eng1 {
			top: -4rem;
			left: calc(100 / 1600 * 100%);
		}
		.-eng2 {
			right: auto;
			left: 0;
		}
		.-eng3 {
			left: calc(200 / 1600 * 100%);
		}
	}
}
.service_business {
	margin-top: 9rem;
	.summary {
		margin-top: 5rem;
		font-size: 1.8rem;
		line-height: 2;
	}
	@media screen and (max-width: 743px) {
		margin-top: 2rem;
		.summary {
			margin-top: 3rem;
			font-size: 1.3rem;
		}
	}

	.business_cycle {
		position: relative;
		margin-top: 4rem;
		.business_cycle_inner {
			position: relative;
			display: grid;
			align-items: center;
			grid-template-columns: 1fr 100rem 1fr;
		}
		.user {
			display: flex;
			text-align: center;
			font-size: 2.2rem;
			line-height: 1.8;
			font-weight: var(--font-weight-bold);
			&.-left {
				justify-content: start;
			}
			&.-right {
				justify-content: end;
			}
		}
		.main {
			position: relative;
			height: 100rem;
			display: flex;
			justify-content: center;
			align-items: center;
			&::before,
			&::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: 100%;
				mix-blend-mode: multiply;
			}
			&::before {
				background-color: #E1E1E1;
				opacity: 0.5;
			}
			&::after {
				background-color: #E8E8E8;
				clip-path: inset(50% 0 0);
			}
			.logo {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30rem;
				height: 30rem;
				background-color: #fff;
				border-radius: 1rem;
				z-index: 5;
				img {
					width: 17.8rem;
				}
			}
			.businesses,
			.businesses_bg {
				position: absolute;
				inset: 0;
				width: 70rem;
				height: 70rem;
				margin: auto;
			}
			.businesses_bg {
				background-color: var(--color-dark);
				border-radius: 100%;
				mix-blend-mode: multiply;
				z-index: 2;
			}
			.businesses {
				z-index: 3;
				&::before,
				&::after {
					content: "";
					position: absolute;
					top: calc(50% - 2.6rem / 2);
					width: 2.2rem;
					height: 2.6rem;
					background-color: var(--color-base);
					clip-path: polygon(0 0, 100% 50%, 0 100%);
				}
				&::before {
					right: calc(100% + 6.6rem);
					transform: scaleX(-1);
				}
				&::after {
					left: calc(100% + 6.6rem);
				}
				dt {
					position: absolute;
					right: 0;
					left: 0;
					text-align: center;
					font-size: 2.2rem;
					line-height: 1.2;
					font-style: italic;
					z-index: 2;
				}
				li {
					--rotate: calc((360deg / 10) * var(--position));
					position: absolute;
					right: 0;
					left: 0;
					bottom: 50%;
					width: 16rem;
					height: 43rem;
					margin-inline: auto;
					transform-origin: 50% 100%;
					transform: rotate(var(--rotate));
					z-index: 3;
					& > span {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 16rem;
						height: 16rem;
						border-radius: 100%;
						color: #fff;
						font-size: 1.6rem;
						line-height: 1.6;
						text-align: center;
						--ls: .05em;
						transform: rotate(calc(var(--rotate) * -1));
					}
				}
				.-advertising {
					dt {
						color: #008CFF;
						bottom: calc(50% + 20rem);
					}
					li span {
						background-color: #008CFF;
					}
				}
				.-regional {
					dt {
						color: #2247DC;
						top: calc(50% + 20rem);
					}
					li span {
						background-color: var(--color-theme);
					}
				}
				.txt {
					position: absolute;
					bottom: calc(50% + 20.5rem);
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30rem;
					height: 2lh;
					text-align: center;
					font-size: 1.8rem;
					line-height: 1.8;
					font-weight: var(--font-weight-bold);
					--ls: .05em;
					&.-txt1 {
						left: -15rem;
					}
					&.-txt2 {
						right: -15rem;
					}
				}
			}
		}
		@media screen and (min-width: 744px), print {
			.business_cycle_slide {
				overflow: visible !important;
			}
			.scroll-hint-icon-wrap {
				display: none !important;
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
			margin-inline: calc(var(--sp-base-padding) * -1);
			.business_cycle_slide {
				overflow-x: auto;
				padding-inline: var(--sp-base-padding);
			}
			.business_cycle_wrap {
				width: calc(var(--base-width) * .6);
				height: calc(100rem * .6);
			}
			.business_cycle_inner {
				width: calc(var(--base-width));
				transform: scale(.6);
				transform-origin: 0 0;
			}
			.main {
				.businesses_bg {
					opacity: 0.9;
				}
			}
			.scroll-hint-icon-wrap {
				.scroll-hint-icon {
					height: 94px;
					top: calc(50% - 94px / 2);
				}
			}
		}
		@media screen {
			.user {
				opacity: 0;
				transform: scale(.5);
				filter: blur(5px);
			}
			.main {
				&::before,
				&::after {
					opacity: 0;
					transform: scale(.8);
				}
				.logo {
					opacity: 0;
					transform: scale(.8);
					filter: blur(10px);
				}
				.businesses_bg {
					opacity: 0;
					transform: scale(.8);
				}
				.businesses {
					&::before,
					&::after {
						opacity: 0;
						transform: scale(.5);
						filter: blur(5px);
					}
					dt {
						opacity: 0;
						transform: scale(.5);
						filter: blur(5px);
					}
					li {
						& > span {
							filter: blur(5px);
							opacity: 0;
						}
					}
					.txt {
						opacity: 0;
						transform: scale(.5);
						filter: blur(5px);
					}
				}
			}
			&._mov_showed {
				.user {
					filter: blur(0);
					opacity: 1;
					transform: scale(1);
					transition: opacity .3s .4s ease, filter .3s .4s ease, transform .3s .4s ease-out;
				}
				.main {
					&::before,
					&::after {
						opacity: 1;
						transform: scale(1);
						transition: opacity .3s ease, transform .3s ease-out;
					}
					.logo {
						filter: none;
						opacity: 1;
						transform: scale(1);
						transition: opacity .3s .2s ease, filter .3s .2s ease, transform .3s .2s ease-out;
					}
					.businesses_bg {
						opacity: 1;
						transform: scale(1);
						transition: opacity .3s ease, transform .3s ease-out;
					}
					.businesses {
						&::before,
						&::after {
							filter: none;
							opacity: 1;
							transform: scale(1);
							transition: opacity .3s .4s ease, filter .3s .4s ease, transform .3s .4s ease-out;
						}
						dt {
							filter: none;
							opacity: 1;
							transform: scale(1);
							transition: opacity .3s .1s ease, filter .3s .1s ease, transform .3s .1s ease-out;
						}
						li {
							& > span {
								opacity: 1;
								filter: none;
								transition: opacity .5s ease, filter .5s ease-out;
								transition-delay: calc(var(--delay) * .08s);
							}
						}
						.txt {
							filter: none;
							opacity: 1;
							transform: scale(1);
							transition: opacity .3s .4s ease, filter .3s .4s ease, transform .3s .4s ease-out;
						}
					}
				}
			}
		}
	}
	.service_cards {
		margin-top: 10rem;
		.card {
			a {
				position: relative;
				display: block;
				text-decoration: none;
				padding: 6rem;
				background-color: #fff;
				border-radius: 1rem;
				header {
					display: flex;
					align-items: center;
					gap: 4rem;
					margin-bottom: 3.5rem;
					.ico {
						width: 8rem;
						padding-right: 4rem;
						border-right: 1px solid;
						box-sizing: content-box;
					}
					h3 {
						font-size: 3.4rem;
						line-height: 1.5;
					}
				}
				.link_arrow {
					top: auto;
					right: 2rem;
					bottom: 2rem;
				}
				@media (hover) {
					&::after {
						content: "";
						position: absolute;
						inset: 0;
						border: 2px solid var(--color-theme);
						border-radius: 1rem;
						opacity: 0;
						pointer-events: none;
					}
					&:hover::after {
						opacity: 1;
					}
				}
			}
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 4rem 10rem;
			.card {
				width: 60rem;
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
			display: flex;
			flex-direction: column;
			gap: 2rem;
			.card {
				a {
					padding: 3rem;
					header {
						gap: 2rem;
						margin-bottom: 2rem;
						.ico {
							width: 5rem;
							padding-right: 2rem;
						}
						h3 {
							font-size: 2.4rem;
						}
					}
				}
			}
		}
	}
}

.service_advertising {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: 15rem;
	margin-bottom: 13rem;
	padding-inline: 2rem;
	.advertising_section {
		position: relative;
		padding-inline: var(--pc-base-padding);
		padding-block: 15rem 16rem;
		background-color: #fff;
		border-radius: 2rem;
		font-size: 1.8rem;
		line-height: 2;
		isolation: isolate;
		header {
			margin-bottom: 6rem;
			.eng {
				margin-bottom: 2rem;
				font-size: 8rem;
				line-height: 1;
				.area {
					display: block;
					font-weight: 300;
				}
			}
			h2 {
				font-size: 2rem;
				line-height: 1.5;
			}
		}
		.summary {
			.bnr {
				a {
					position: relative;
					display: block;
					padding: 4rem 4rem 2rem;
					background-color: #fff;
					border: 1px solid #6F6F6F;
					border-radius: 1rem;
					font-size: 1.6rem;
					text-decoration: none;
					.title {
						display: block;
						margin-bottom: 2rem;
						font-size: 2.4rem;
						line-height: 1.6;
						font-weight: var(--font-weight-bold);
					}
					.link_arrow {
						right: 2rem;
						bottom: 2rem;
						top: auto;
					}
					@media (hover) {
						&::after {
							content: "";
							position: absolute;
							inset: -1px;
							border: 2px solid var(--color-theme);
							border-radius: 1rem;
							opacity: 0;
							pointer-events: none;
						}
						&:hover::after {
							opacity: 1;
						}
					}
				}
			}
		}
		.advertising_works {
			position: relative;
			margin-top: 8rem;
			.works_title {
				position: relative;
				padding-left: 4.5rem;
				font-size: 4rem;
				line-height: 1.2;
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					width: 3rem;
					border-top: 2px solid var(--color-theme);
				}
			}
			.works_list_item {
				width: 64rem;
				padding-right: 4rem;
				.item_img {
					aspect-ratio: 600 / 380;
					&.-noimage {
						background-color: var(--bg-base);
					}
				}
				.item_tags, .link_arrow {
					display: none;
				}
			}
			.works_nav {
				display: flex;
				align-items: center;
				.slide_count {
					width: 15rem;
					font-size: 1.8rem;
					font-variant-numeric: tabular-nums;
					font-feature-settings: "tnum";
					text-align: center;
					&:has(+ .swiper-button-lock) {
						display: none;
					}
				}
			}
		}
		.bg_logo {
			position: absolute;
			overflow: hidden;
			inset: 0;
			border-radius: 2rem;
			z-index: -1;
			.logo {
				position: absolute;
				top: 10rem;
				left: calc(50% + 5rem);
				& > div {
					width: 80rem;
					height: 80rem;
					background: url(../img/logo-mark.svg) no-repeat 50%;
					background-size: 100%;
					opacity: 0.1;
					filter: blur(10px);
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.advertising_section_inner {
			max-width: var(--base-width);
			margin-inline: auto;
		}
		.advertising_section {
			.summary {
				display: flex;
				justify-content: space-between;
				.bnr {
					flex-shrink: 0;
					width: 45.6rem;
					margin-left: 10rem;
				}
			}
			.advertising_works {
				display: flex;
				align-items: flex-start;
				.advertising_works_list {
					margin-left: auto;
					width: calc(100% - 35rem);
					.swiper {
						width: calc(64rem * 2);
						margin: 0;
					}
				}
				.works_list_item {
					.item_title {
						font-size: 2.6rem;
					}
				}
				.works_nav {
					position: absolute;
					left: 0;
					bottom: 0;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 10rem;
		margin-bottom: 10rem;
		padding-inline: 0;
		.advertising_section {
			padding-inline: var(--sp-base-padding);
			padding-block: 4rem 6rem;
			border-radius: 0;
			font-size: 1.3rem;
			header {
				margin-bottom: 3rem;
				.eng {
					margin-bottom: 1.2rem;
					font-size: 4rem;
					.sp_s {
						display: block;
						margin-bottom: 0.2rem;
						font-size: 3rem;
					}
				}
				h2 {
					font-size: 1.6rem;
				}
			}
			.summary {
				.bnr {
					margin-top: 2rem;
					a {
						padding: 2rem 2rem 1.5rem;
						font-size: 1.2rem;
						.title {
							margin-bottom: 1rem;
							font-size: 1.8rem;
						}
						.link_arrow {
							right: 1.5rem;
							bottom: 1.5rem;
						}
					}
				}
			}
			.advertising_works {
				margin-top: 4rem;
				.works_title {
					margin-bottom: 1.5rem;
					padding-left: 3.5rem;
					font-size: 2.6rem;
					&::before {
						width: 2rem;
					}
				}
				.advertising_works_list {
					margin-inline: calc(var(--sp-base-padding) * -1);
					.swiper {
						padding-inline: var(--sp-base-padding);
					}
				}
				.works_list_item {
					width: 32rem;
					padding-right: var(--sp-base-padding);
					.item_title {
						font-size: 1.8rem;
					}
					.item_categories {
						font-size: 1.2rem;
					}
				}
				.works_nav {
					position: absolute;
					right: 0;
					top: -.5rem;
					justify-content: center;
					.slide_count {
						width: 8rem;
						font-size: 1.6rem;
					}
				}
			}
			.bg_logo {
				border-radius: 0;
				.logo {
					top: -2rem;
					left: calc(50% - 5rem);
					& > div {
						width: 40rem;
						height: 40rem;
					}
				}
			}
		}
	}
}

/* ============================================================================

	スタッフ

============================================================================= */
.staff_list_wrap {
	max-width: var(--base-width);
	margin-inline: auto;
	margin-top: 8rem;
	padding-bottom: 16rem;
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		margin-inline: var(--sp-base-padding);
		padding-bottom: 10rem;
	}
}
.staff_list {
	display: flex;
	flex-wrap: wrap;
	.staff_list_item {
		a {
			display: block;
			text-decoration: none;
			.item_img {
				position: relative;
				overflow: hidden;
				aspect-ratio: 1;
				border-radius: 1rem;
				margin-bottom: 1rem;
				&.-noimage {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #fff;
					img {
						width: 70%;
					}
				}
			}
			.item_body {
				font-size: 1.4rem;
				line-height: 1.6;
			}
			.name {
				font-size: 2.6rem;
				line-height: 1.3;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		gap: 5rem 2.5rem;
		.staff_list_item {
			width: calc((100% - 2.5rem * 4) / 5);
		}
	}
	@media screen and (max-width: 743px) {
		gap: 4rem 1rem;
		.staff_list_item {
			width: calc((100% - 1rem * 1) / 2);
			a {
				.item_body {
					font-size: 1.2rem;
				}
				.name {
					font-size: 2rem;
					line-height: 1.3;
				}
			}
		}
	}
}


.staff_detail_contents {
	max-width: var(--base-width);
	margin-inline: auto;
	margin-top: 8rem;
	padding-bottom: 16rem;
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		margin-inline: var(--sp-base-padding);
		padding-bottom: 6rem;
	}
	.staff_sec_title {
		font-size: 1.8rem;
		line-height: 1.5;
		text-align: center;
		&::after {
			content: "";
			display: block;
			width: 0;
			height: 3rem;
			margin: 2rem auto 1.5rem;
			border-left: 1px solid var(--color-theme);
		}
		@media screen and (max-width: 743px) {
			font-size: 1.6rem;
		}
	}
	.staff_main {
		display: flex;
		.main_image {
			overflow: hidden;
			aspect-ratio: 1;
			border-radius: 2rem;
			&.-noimage {
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					width: 70%;
				}
			}
		}
		.slogan {
			text-align: center;
			dd {
				font-size: 5rem;
				line-height: 1.6;
				font-weight: var(--font-weight-bold);
			}
		}
		.info {
			font-weight: var(--font-weight-bold);
			h1 {
				margin-bottom: 1rem;
				font-size: 4.6rem;
				line-height: 1.2;
			}
		}
		@media screen and (min-width: 744px), print {
			justify-content: space-between;
			& > * {
				width: 59rem;
			}
			.txt {
				display: flex;
				flex-direction: column;
				.slogan {
					flex-grow: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-bottom: 3rem;
				}
			}
		}
		@media screen and (max-width: 743px) {
			flex-direction: column;
			gap: 3rem;
			.slogan {
				dd {
					font-size: 3rem;
				}
			}
			.info {
				text-align: center;
				margin-top: 5rem;
				h1 {
					font-size: 3rem;
				}
			}
		}
	}
	.staff_row {
		position: relative;
		margin-top: 10rem;
		padding-top: 10rem;
		border-top: 1px solid;
		display: flex;
		text-align: center;
		font-size: 4rem;
		line-height: 1.6;
		font-weight: var(--font-weight-bold);
		@media screen and (min-width: 744px), print {
			justify-content: space-between;
			&:has( > *:only-child) {
				justify-content: center;
			}
			& > * {
				width: 59rem;
			}
			&.-line {
				&::before {
					content: "";
					position: absolute;
					top: 10rem;
					bottom: 0;
					left: 50%;
					border-left: 1px solid;
				}
			}
		}
		@media screen and (max-width: 743px) {
			flex-direction: column;
			gap: 0;
			margin-top: 5rem;
			padding-top: 5rem;
			font-size: 2.4rem;
			& > * + section {
				margin-top: 5rem;
				padding-top: 5rem;
				border-top: 1px solid;
			}
		}
	}
	.favorite_value {
		.value {
			padding-top: 2rem;
			&::before {
				content: "";
				display: block;
				width: 5rem;
				height: 5rem;
				margin-inline: auto;
				margin-bottom: 1rem;
				background: url(../img/logo-mark.svg) no-repeat 50%;
				background-size: contain;
			}
		}
		.reasons {
			margin-top: 2rem;
			font-size: 1.8rem;
			line-height: 1.8;
		}
	}
	.off_time_image {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1.5rem;
		background-color: #fff;
		aspect-ratio: 1;
		border-radius: 2rem;
		img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
			border-radius: 1rem;
		}
	}
	@media screen and (min-width: 744px), print {
		.good_points {
			padding-inline: 2rem;
		}
		.offtime {
			align-items: center;
			.txt {
				padding-inline: 2rem;
			}
			.off_time_image {
				height: 59rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		.favorite_value {
			.value {
				padding-top: 1rem;
				&::before {
					width: 4rem;
					height: 4rem;
				}
			}
			.reasons {
				font-size: 1.5rem;
			}
		}
		.off_time_image {
			width: calc(100vw - var(--sp-base-padding) * 2);
			height: calc(100vw - var(--sp-base-padding) * 2);
			margin-top: 3rem;
		}
	}
}

.staff_prevnext_btn {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 20rem;
	text-decoration: none;
	.item_img {
		flex-shrink: 0;
		width: calc(260 / 550 * 100%);
		border-radius: 1rem;
		overflow: hidden;
		margin-right: 3rem;
		&.-noimage {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			img {
				width: 70%;
			}
		}
	}
	.txt {
		flex-grow: 1;
		padding-bottom: 4.6rem;
		font-size: 1.4rem;
		line-height: 1.5;
		.name {
			display: block;
			margin-top: 1rem;
			padding-bottom: 2rem;
			font-size: 2.8rem;
			line-height: 1.5;
			border-bottom: 1px solid;
		}
	}
	.link_arrow {
		top: auto;
		right: 0;
		bottom: 0;
	}
	@media screen and (min-width: 744px), print {
		width: 55rem;
		.item_img {
			height: 20rem;
		}
	}
	@media screen and (max-width: 743px) {
		display: flex;
		min-height: 10rem;
		.item_img {
			width: 13rem;
			height: 10rem;
			margin-right: 2rem;
		}
		.txt {
			padding-bottom: 3.2rem;
			font-size: 1.2rem;
			.name {
				margin-top: .2rem;
				padding-bottom: .5rem;
				font-size: 2.2rem;
			}
		}
	}
}




/* ============================================================================

	実績

============================================================================= */
.works_list_wrap {
	max-width: var(--base-width);
	margin-inline: auto;
	margin-top: 8rem;
	padding-bottom: 16rem;
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		margin-inline: var(--sp-base-padding);
		padding-bottom: 10rem;
	}
}
.works_list {
	display: flex;
	@media screen and (min-width: 744px), print {
		flex-wrap: wrap;
		gap: 8rem 4rem;
		.works_list_item {
			width: calc((100% - 4rem) / 2);
		}
	}
	@media screen and (max-width: 743px) {
		flex-direction: column;
		gap: 4rem;
	}
}

.works_detail_contents {
	max-width: var(--base-width);
	margin-inline: auto;
	margin-top: 8rem;
	padding-bottom: 16rem;
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		margin-inline: var(--sp-base-padding);
		padding-bottom: 6rem;
	}
	.main_image {
		margin-bottom: 5rem;
		padding: 3rem;
		background-color: #fff;
		border-radius: 2rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 3rem;
			margin-inline: calc(var(--sp-base-padding) * -1);
			border-radius: 1rem;
			padding: 1.5rem;
		}
	}
	.works_detail_header {
		margin-bottom: 9rem;
		padding-bottom: 10rem;
		border-bottom: 1px solid;
		h1 {
			font-size: 4.2rem;
			line-height: 1.6;
		}
		.works_categories {
			display: flex;
			flex-wrap: wrap;
			margin-top: 2rem;
			font-size: 1.6rem;
			line-height: 1.4;
			font-weight: 700;
			& > li:not(:last-child)::after {
				content: "｜";
				margin-inline: 1em;
			}
		}
		.works_tags {
			display: flex;
			flex-wrap: wrap;
			font-size: 1.4rem;
			line-height: 2;
			& > li:not(:last-child)::after {
				content: "／";
			}
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			gap: 6rem;
			.works_tags {
				position: relative;
				flex-shrink: 0;
				align-items: center;
				align-content: center;
				width: 48rem;
				padding-left: 8rem;
				margin-left: auto;
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0.5rem;
					bottom: 0.5rem;
					border-left: 1px solid;
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 5rem;
			padding-bottom: 4rem;
			h1 {
				font-size: 2.4rem;
			}
			.works_categories {
				margin-top: 1rem;
				& > li:not(:last-child)::after {
					margin-inline: .5em;
				}
			}
			.works_tags {
				margin-top: 1rem;
			}
		}
	}
	.outline {
		h2 {
			font-size: 4rem;
			line-height: 1;
		}
		.image {
			margin-top: 8rem;
			img {
				border-radius: 1rem;
			}
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			flex-wrap: wrap;
			.txt {
				margin-left: auto;
				width: 100rem;
			}
			.image {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 4rem;
			}
		}
		@media screen and (max-width: 743px) {
			h2 {
				margin-bottom: 2rem;
				font-size: 2.2rem;
			}
			.image {
				margin-top: 3rem;
				display: flex;
				flex-direction: column;
				gap: 2rem;
			}
		}
	}

	.links {
		margin-top: 6rem;
		padding: 2rem 3rem;
		background-color: #fff;
		border-radius: 1rem;
		dd {
			--ls: 0.02em;
		}
		@media screen and (min-width: 744px), print {
			width: 100%;
			display: flex;
			dt {
				flex-shrink: 0;
				&::after {
					content: "：";
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
			padding: 2rem 2rem;
		}
	}
}

.works_prevnext_btn {
	position: relative;
	overflow: hidden;
	display: flex;
	min-height: 20rem;
	background-color: #fff;
	border-radius: 1rem;
	text-decoration: none;
	.item_img {
		flex-shrink: 0;
		width: calc(270 / 600 * 100%);
	}
	.txt {
		padding: 3rem;
		.title {
			display: block;
			font-weight: var(--font-weight-bold);
			font-size: 2.2rem;
			line-height: 1.6;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
		}
		.item_categories {
			display: flex;
			flex-wrap: wrap;
			margin-top: 2rem;
			font-size: 1.4rem;
			line-height: 1.4;
			font-weight: 700;
			& > li:not(:last-child)::after {
				content: "｜";
				margin-inline: .5em;
			}
		}
	}
	.link_arrow {
		top: auto;
		right: 1rem;
		bottom: 1rem;
	}
	@media screen and (min-width: 744px), print {
		width: 60rem;
	}
	@media screen and (max-width: 743px) {
		display: flex;
		min-height: 12rem;
		.item_img {
			width: calc(270 / 600 * 100%);
		}
		.txt {
			padding: 1.5rem 2rem;
			.title {
				font-size: 1.4rem;
			}
			.item_categories {
				margin-top: 1rem;
				font-size: 1rem;
			}
		}
		.link_arrow {
			right: 0.5rem;
			bottom: 0.5rem;
		}
	}
}


/* ============================================================================

	コラム

============================================================================= */
.column_list_wrap {
	max-width: var(--base-width);
	margin-inline: auto;
	margin-top: 10rem;
	padding-bottom: 16rem;
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
		margin-inline: var(--sp-base-padding);
		padding-bottom: 10rem;
	}
}

.column_list_item {
	& + .column_list_item {
		margin-top: 12rem;
	}
	@media screen and (max-width: 743px) {
		& + .column_list_item {
			margin-top: 8rem;
		}
	}
	a {
		position: relative;
		display: block;
		text-decoration: none;
		color: var(--color-base);
		.num {
			position: absolute;
			left: 0;
			bottom: calc(100% + 1.6rem);
			font-size: 2rem;
			line-height: 1;
		}
		.item_img {
			overflow: hidden;
			border-radius: 2rem;
			aspect-ratio: 780 / 410;
			&.-noimage {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--bg-base);
				img {
					width: 70%;
				}
			}
		}
		.item_body {
			padding-block: 4rem;
			border-top: .6rem solid;
			border-bottom: .2rem solid;
			.item_title {
				margin-bottom: 2rem;
				font-size: 3.2rem;
				line-height: 1.8;
			}
			time, .item_tags {
				font-size: 1.6rem;
				line-height: 2;
			}
			.item_tags {
				display: flex;
				flex-wrap: wrap;
				gap: 0 1em;
			}
			.people {
				display: flex;
				dt {
					flex-shrink: 0;
					&::after {
						content: "：";
					}
				}
				ul {
					display: flex;
					flex-wrap: wrap;
					li:not(:last-child)::after {
						content: "/";
						margin-inline: .2em;
					}
				}
			}
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
			.item_img {
				width: 78rem;
				height: 41rem;
			}
			.item_body {
				width: 43rem;
				display: flex;
				flex-direction: column;
				.meta {
					margin-top: auto;
				}
			}
		}
		@media screen and (max-width: 743px) {
			.item_img {
				border-radius: 1rem;
				aspect-ratio: 780 / 540;
			}
			.item_body {
				margin-top: 0;
				padding-block: 2rem;
				border-top-width: 0;
				.item_title {
					font-size: 2rem;
					line-height: 1.8;
				}
				time, .item_tags {
					font-size: 1.3rem;
				}
			}
		}
	}
}
.works_column_list {
	margin-top: 16rem;
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
	}
	.column_list_item {
		& + .column_list_item {
			margin-top: 6rem;
		}
		@media screen and (max-width: 743px) {
			& + .column_list_item {
				margin-top: 4rem;
				a::before {
					content: none;
				}
			}
		}
		a {
			&::before {
				content: "Insight of INSIGHT";
				position: absolute;
				top: 0;
				left: 0;
				font-family: var(--font-family-en);
				font-weight: var(--font-weight-semi);
				font-size: 4rem;
				letter-spacing: 0.05em;
				line-height: 1;
			}
			.people {
				display: none;
			}
			@media screen and (min-width: 744px), print {
				.item_img {
					height: 46rem;
					aspect-ratio: 780 / 460;
				}
				.item_body {
					margin-top: 8rem;
				}
			}
			@media screen and (max-width: 743px) {
				&::before {
					position: static;
					display: block;
					margin-bottom: 2rem;
					font-size: 2.2rem;
				}
			}
		}
	}
}

.column_detail_header {
	position: relative;
	overflow: hidden;
	border-radius: 2rem;
	height: 80rem;
	margin: 8rem 2rem 12rem;
	padding-top: 5rem;
	color: #fff;
	.page_title {
		padding-top: 0;
		.title::before {
			border-color: #fff;
		}
		.eng {
			font-size: 8rem;
			white-space: nowrap;
		}
	}
	.head {
		position: absolute;
		inset: auto var(--pc-base-padding) 10rem;
		width: 100%;
		max-width: var(--base-width);
		margin-inline: auto;
		.meta {
			display: flex;
			font-size: 1.8rem;
			line-height: 1.5;
			gap: 1em;
			ul {
				display: flex;
				gap: 1em;
				flex-wrap: wrap;
			}
		}
		h1 {
			margin-top: 2rem;
			font-size: 4rem;
			line-height: 1.5;
			font-weight: var(--font-weight-bold);
			span {
				display: block;
				width: fit-content;
				padding: 0 2rem;
				background-color: #fff;
				color: var(--color-base);
			}
		}
	}
	&:not(:has(.main_image)) {
		background-color: #ccc;
	}
	@media screen and (max-width: 743px) {
		border-radius: 0;
		height: 30rem;
		margin: var(--header-height) 0 4rem;
		padding-top: 2rem;
		.page_title {
			.eng {
				font-size: 3.2rem;
			}
		}
		.head {
			inset: auto var(--sp-base-padding) 2rem;
			width: auto;
			.meta {
				font-size: 1.2rem;
			}
			h1 {
				margin-top: 1rem;
				font-size: 1.8rem;
				span {
					padding: 0 1rem;
				}
			}
		}
	}
}

.column_prevnext_btn {
	position: relative;
	overflow: hidden;
	display: flex;
	min-height: 20rem;
	text-decoration: none;
	.item_img {
		flex-shrink: 0;
		width: calc(260 / 550 * 100%);
		border-radius: 1rem;
		overflow: hidden;
		margin-right: 3rem;
	}
	.txt {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		border-top: .4rem solid;
		padding-top: 2rem;
		.title {
			display: block;
			font-weight: var(--font-weight-bold);
			font-size: 2rem;
			line-height: 1.8;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
		}
		.date{
			margin-top: auto;
			display: block;
			padding-top: 2rem;
			font-size: 1.4rem;
			border-top: 1px solid #000;
		}
	}
	.link_arrow {
		top: auto;
		right: 0;
		bottom: 0;
	}
	@media screen and (min-width: 744px), print {
		width: 55rem;
		.item_img {
			height: 20rem;
		}
	}
	@media screen and (max-width: 743px) {
		display: flex;
		min-height: 10rem;
		.item_img {
			width: 13rem;
			height: 10rem;
			margin-right: 2rem;
		}
		.txt {
			padding-top: 1rem;
			.title {
				padding-bottom: 1rem;
				font-size: 1.4rem;
				line-height: 1.6;
			}
			.date{
				padding-top: 0.7rem;
				padding-bottom: 0.2rem;
				font-size: 1rem;
			}
		}
	}
}



/* ============================================================================

	ニュース

============================================================================= */
.news_list_wrap {
	max-width: var(--base-width);
	margin-inline: auto;
	margin-top: 8rem;
	padding-bottom: 16rem;
	@media screen and (max-width: 743px) {
		margin-top: 4rem;
		margin-inline: var(--sp-base-padding);
		padding-bottom: 10rem;
	}
}
.news_list {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	a {
		position: relative;
		display: block;
		padding: 2.4rem 4rem 2.4rem 2.4rem;
		background-color: #fff;
		border-radius: 1rem;
		text-decoration: none;
		.item_img {
			overflow: hidden;
			aspect-ratio: 271 / 152;
			border-radius: 1rem;
			&.-noimage {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--bg-base);
				img {
					width: 70%;
				}
			}
		}
		time {
			display: block;
			margin-bottom: 1rem;
			line-height: 1.2;
			font-size: 1.6rem;
		}
		.item_title {
			font-size: 2.2rem;
			line-height: 1.6;
			font-weight: var(--font-weight-bold);
		}
		.link_arrow {
			top: auto;
			bottom: 1rem;
			right: 1rem;
		}
	}
	@media screen and (min-width: 744px), print {
		a {
			display: flex;
			align-items: center;
			gap: 3rem;
			.item_img {
				flex-shrink: 0;
				width: 27.1rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		gap: 2rem;
		a {
			padding: 1.2rem;
			background-color: #fff;
			border-radius: 1rem;
			text-decoration: none;
			.item_body {
				margin-top: 1rem;
				padding: 0.8rem .8rem 1.2rem;
			}
			time {
				margin-bottom: 0.5rem;
				font-size: 1.2rem;
			}
			.item_title {
				font-size: 1.6rem;
			}
		}
	}
}


.article_news_header {
	margin-bottom: 9rem;
	h1 {
		margin-bottom: 3rem;
		padding-bottom: 4rem;
		border-bottom: 1px solid;
		font-size: 4.2rem;
		line-height: 1.6;
	}
	@media screen and (max-width: 743px) {
		margin-bottom: 5rem;
		h1 {
			margin-bottom: 2rem;
			padding-bottom: 2rem;
			font-size: 2.4rem;
		}
	}
}

.article_thumbnail_image {
	overflow: hidden;
	aspect-ratio: 1300 / 622;
	margin-inline: calc(var(--detail-box-plr) * -1);
	margin-top: calc(var(--detail-box-pt) * -1);
	margin-bottom: 8rem;
	border-radius: var(--detail-box-bdrs) var(--detail-box-bdrs) 0 0;
	@media screen and (max-width: 743px) {
		margin-bottom: 4rem;
	}
}
.news_prevnext_btn {
	position: relative;
	overflow: hidden;
	display: flex;
	min-height: 20rem;
	text-decoration: none;
	.item_img {
		flex-shrink: 0;
		width: calc(260 / 550 * 100%);
		border-radius: 1rem;
		overflow: hidden;
		margin-right: 3rem;
		&.-noimage {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			img {
				width: 70%;
			}
		}
	}
	.txt {
		display: flex;
		flex-direction: column;
		padding-top: 2rem;
		.title {
			display: block;
			font-weight: var(--font-weight-bold);
			font-size: 2rem;
			line-height: 1.8;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
		}
		.date{
			margin-top: auto;
			display: block;
			padding-top: 2rem;
			font-size: 1.4rem;
			border-top: 1px solid #000;
		}
	}
	.link_arrow {
		top: auto;
		right: 0;
		bottom: 0;
	}
	@media screen and (min-width: 744px), print {
		width: 55rem;
		.item_img {
			height: 20rem;
		}
	}
	@media screen and (max-width: 743px) {
		display: flex;
		min-height: 10rem;
		.item_img {
			width: 13rem;
			height: 10rem;
			margin-right: 2rem;
		}
		.txt {
			padding-top: 0;
			.title {
				margin-bottom: 1rem;
				font-size: 1.4rem;
			}
			.date{
				padding-top: 0.7rem;
				padding-bottom: 0.2rem;
				font-size: 1rem;
			}
		}
	}
}



/* ============================================================================

	フォーム

============================================================================= */
.wpcf7 {
	.wpcf7-form {
		input[type=text],
		input[type=email],
		input[type=tel],
		input[type=number],
		input[type=date],
		input[type=url],
		textarea,
		select {
			width: 100%;
			max-width: 100%;
			height: 5rem;
			padding: 0 1.5em;
			background-color: #fff;
			border: 1px solid var(--color-base);
			border-radius: .2rem;
			font-size: 1.6rem;
			color: var(--color-base);
			transition: box-shadow .2s, border .2s;
			&:focus {
				border-color: #66afe9;
				outline: 0;
				box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,0.8);
			}
			&:disabled {
				background-color: #ddd;
				opacity: .5;
			}
		}
		select {
			background: #fff url(../img/form/form-select-arrow.svg) no-repeat 100% 50%;
			background-size: 4rem;
		}
		textarea {
			height: 18rem;
			padding: 1em 1.5em;
		}
		input[type=checkbox],
		input[type=radio] {
			position: absolute;
			width: 2rem;
			height: 2rem;
		}
		label {
			position: relative;
			display: flex;
			align-items: center;
			height: 5rem;
			gap: 1rem;
			.check {
				flex-shrink: 0;
				position: relative;
				width: 2rem;
				height: 2rem;
				border: 1px solid var(--color-base);
			}
			input[type=radio] {
				& + .check {
					border-radius: 100%;
					&::after {
						content: "";
						position: absolute;
						inset: .4rem;
						background-color: var(--color-theme);
						border-radius: 100%;
						opacity: 0;
						transition: opacity .1s;
					}
				}
				&:checked {
					& + .check {
						&::after {
							opacity: 1;
						}
					}
				}
			}
			input[type=checkbox] {
				& + .check {
					border-radius: .2rem;
					&::after {
						content: "";
						position: absolute;
						left: .6rem;
						top: calc(50% - .8rem);
						width: .7rem;
						height: 1.4rem;
						border-right: .3rem solid var(--color-base);
						border-bottom: .3rem solid var(--color-base);
						opacity: 0;
						transition: opacity .1s;
						transform: rotate(45deg);
					}
				}
				&:checked {
					& + .check {
						&::after {
							opacity: 1;
						}
					}
				}
			}
		}
		@media screen and (max-width: 743px) {
			input[type=text],
			input[type=email],
			input[type=tel],
			input[type=number],
			input[type=date],
			input[type=url],
			textarea,
			select {
				padding-inline: 1em;
				font-size: 16px;
			}
			label {
				height: auto;
				min-height: 3.6rem;
				font-size: 1.5rem;
			}
		}

		ul, ol {
			margin: 0;
		}
		li {
			padding: 0 !important;
			list-style: none !important;
			&::before {
				content: none !important;
			}
		}
		.form_item {
			position: relative;
			margin-bottom: 4rem;
			dt {
				position: relative;
				font-weight: var(--font-weight-bold);
				line-height: 1.6;
				--ls: .05em;
				.hissu {
					position: absolute;
					top: calc(50% - 2.6rem / 2);
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 4.2rem;
					height: 2.6rem;
					background-color: var(--color-theme);
					font-weight: var(--font-weight-medium);
					border-radius: 0.2em;
					color: #fff;
					font-size: 1.2rem;
				}
			}
			dd {
				margin: 0;
			}
			.hint {
				font-size: 1.4rem;
				color: #acacac;
			}
			.zip_search {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 12.4rem;
				height: 5rem;
				margin-left: -1rem;
				background-color: var(--color-theme2);
				border-radius: 0.4rem;
				font-size: 1.5rem;
				--ls: .05em;
				color: #fff;
				cursor: pointer;
				@media (hover) {
					transition: opacity var(--transition);
					&:hover {
						opacity: 0.7;
					}
				}
			}
		}
		.address_item {
			dl {
				position: relative;
			}
		}

		.form-privacy {
			height: 28.5rem;
			overflow-y: auto;
			overscroll-behavior-y: contain;
			margin-top: 8rem;
			padding: 5rem;
			background-color: #F5F5F5;
			border-radius: 1rem;
			font-size: 1.4rem;
			line-height: 1.8;
			color: #000;
			/* & > ol > li:not(:first-child) { */
			& > ol > li {
				margin-top: 1lh;
			}
			ol ol,
			ol ol li:not(:first-child) {
				margin-top: 0.5lh;
			}
		}
		.privacy_check {
			width: fit-content;
			margin-top: 4rem;
			margin-inline: auto;
			li {
				display: flex;
				align-items: center;
			}
		}

		.submit {
			margin-top: 6rem;
			text-align: center;
			:disabled {
				opacity: 0.3;
			}
		}
		@media screen and (min-width: 744px), print {
			.form_item {
				display: grid;
				grid-template-columns: 22rem 1fr;
				dt {
					display: flex;
					align-items: center;
					height: 5rem;
					padding-left: 6rem;
				}
				dd {
					display: flex;
					gap: 2rem;
					.wpcf7-form-control-wrap {
						display: flex;
						justify-content: center;
						flex-direction: column;
						width: 44rem;
						min-height: 5rem;
						&:has(input[type=file]) {
							width: fit-content;
							max-width: 44rem;
						}
					}
					&.dd-wide {
						.wpcf7-form-control-wrap {
							width: 100%;
						}
					}
					.hint {
						display: flex;
						align-items: center;
						height: 5rem;
					}
					&:has(textarea) {
						flex-wrap: wrap;
						gap: 1rem;
						.wpcf7-form-control-wrap {
							width: 100%;
						}
						.hint {
							display: block;
							width: 100%;
							height: auto;
							text-align: right;
						}
					}
				}
			}
			.address_item {
				flex-direction: column;
				dl {
					display: flex;
					dt {
						width: 8.4rem;
						flex-shrink: 0;
						padding-left: 0;
					}
					dd {
						flex-grow: 1;
					}
					.wpcf7-form-control-wrap {
						width: 22rem;
					}
					&.-address {
						.wpcf7-form-control-wrap {
							width: 100%;
						}
					}
				}
			}
		}
		@media screen and (max-width: 743px) {
			.form_item {
				margin-bottom: 3rem;
				dt {
					margin-bottom: 1rem;
					font-size: 1.6rem;
					&:has(.hissu) {
						padding-left: 5rem;
					}
				}
				dd {
					.hint {
						position: absolute;
						right: 0;
						top: .1em;
						font-size: 1.2rem;
					}
				}
			}
			.address_item {
				dl {
					margin-bottom: 1rem;
					dt {
						margin-bottom: 0.5rem;
					}
					&.-zip {
						dd {
							display: flex;
							gap: 1rem;
							.wpcf7-form-control-wrap {
								width: calc(100% - 10rem);
							}
							.zip_search {
								width: 9rem;
								margin-left: 0;
								font-size: 1.3rem;
							}
						}
					}
				}
			}
			.form-privacy {
				margin-top: 4rem;
				padding: 2rem;
				font-size: 1.2rem;
			}
			.privacy_check {
				margin-top: 4rem;
			}
			.submit {
				margin-top: 3rem;
			}
		}

		.wpcf7-list-item {
			margin: 0;
		}
		.wpcf7-radio,
		.wpcf7-checkbox {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem 4rem;
		}
		.radio-column .wpcf7-radio,
		.radio-column .wpcf7-checkbox {
			flex-direction: column;
			gap: 0;
		}
		.wpcf7-not-valid-tip {
			font-weight: var(--font-weight-bold);
			font-size: 1.4rem;
			margin-top: 1rem;
		}
		.wpcf7-response-output {
			margin-inline: 0;
		}
		@media screen and (max-width: 743px) {
			.wpcf7-form-control {
				gap: 1rem 2rem;
				& > * {
					display: block;
				}
			}
		}

		&.-fin {
			text-align: center;
			line-height: 2.2;
			.lead {
				margin-bottom: 4rem;
				font-size: 2.6rem;
				line-height: 1.6;
				font-weight: var(--font-weight-bold);
				color: var(--color-base);
			}
			.back_btn {
				margin-top: 6rem;
			}
			@media screen and (max-width: 743px) {
				.lead {
					margin-bottom: 3rem;
					font-size: 2rem;
				}
				.back_btn {
					margin-top: 3rem;
				}
			}
		}
	}
	.form_btn {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		max-width: 100%;
		width: 46rem;
		height: 8rem;
		margin-inline: auto;
		padding-right: 2rem;
		background: #fff;
		border: 1px solid var(--color-dark);
		color: var(--color-dark);
		text-decoration: none;
		font-size: 2rem;
		line-height: 1.5;
		font-weight: var(--font-weight-bold);
		&::after {
			content: "";
			position: absolute;
			right: 2rem;
			top: 0;
			bottom: 0;
			margin-block: auto;
			width: 2rem;
			height: 2rem;
			background: url(../img/form/ico-arrow.svg) no-repeat 50%;
			background-size: 100%;
		}
		@media (hover) {
			&:hover {
				background-color: #F5F5F5;
			}
		}
		@media screen and (max-width: 743px) {
			height: 7rem;
			padding-right: 1rem;
			font-size: 1.5rem;
			&::after {
				right: 1.5rem !important;
			}
			&.-mynavi {
				img {
					width: 22rem;
				}
			}
		}
	}

}
.cf-turnstile {
	display: flex;
	justify-content: center;
	margin-top: 4rem;
}



/* ============================================================================

	404

============================================================================= */
.page404 {
	text-align: center;
	font-size: 1.8rem;
	line-height: 2;
	.lead {
		margin-bottom: 6rem;
		font-weight: 700;
		font-size: 3.4rem;
		line-height: 1.6;
	}
	.back_btn {
		margin-top: 6rem;
		display: flex;
		justify-content: center;
	}
	@media screen and (max-width: 743px) {
		font-size: 1.5rem;
		.lead {
			margin-bottom: 4rem;
			font-size: 2.4rem;
		}
		.back_btn {
			margin-top: 4rem;
		}
	}
}