@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: #505050;
	--color-white: #fff;
	--bg-base: #fff;
	--bg-gray: #f8f8f8;
	--border: #707070;
	--base-width: 120rem;
	--base-width-s: 92rem;
	--pc-min-window: 1300;
	--sp-base-padding: 2rem;
	--font-family-jp: 'Zen Kaku Gothic New', sans-serif;
	--font-family-en: 'Poppins', 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);
	--transition-duration: .3s;
	--transition: var(--transition-duration) ease-in-out;
	--header-height: 10rem;
	@media screen and (max-width: 743px) {
		--header-height: 5rem;
	}
}

/* ========================================================
	template.css => テンプレート用CSS
======================================================== */
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	@media screen and (min-width: 744px), print {
		/* font-size: min(calc(10px - (1440px - 100vw) * (10 / 1440)), 10px); */
		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 / 320) * 100vw);
	}
}
html.no-scroll-behavior {
	scroll-behavior: auto;
}
body {
	background-color: var(--bg-base);
	font-size: 1.8rem;
	line-height: 2;
	color: var(--color-base);
	word-wrap: break-word;
	overflow-wrap: break-word;
	letter-spacing: .05em;

	font-family: var(--font-family-jp);
	font-weight: var(--font-weight);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
@media screen and (max-width: 743px) {
	body {
		font-size: 1.2rem;
		line-height: calc(22 / 12);
	}
}

*,
*::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%;
	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);
}
@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.-hvw) {
		text-decoration-color: rgba(255,255,255,0);
	}
	:where(a[href]:hover ._hl.-hvw) {
		text-decoration-color: #fff;
	}
}

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

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

#top {
	display: block;
}

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

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

/* font
====================================================================== */
._ff_en {
	font-family: var(--font-family-en);
	font-weight: 500;
	font-style: normal;
	letter-spacing: .03em;
}
._fwn {
	font-weight: var(--font-weight);
}
._fwr {
	font-weight: var(--font-weight-reg);
}
._fwm {
	font-weight: var(--font-weight-medium);
}
._fwb {
	font-weight: var(--font-weight-bold);
}
._wsnw {
	white-space: nowrap;
}
@media screen and (min-width: 744px), print {
	._pc_wsnw {
		white-space: nowrap;
	}
}
@media screen and (max-width: 743px) {
	._sp_wsnw {
		white-space: nowrap;
	}
}

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

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

/* hover
====================================================================== */
@media (hover) {
	a[href] ._hv_op {
		transition: opacity var(--transition);
	}
	a:is([href], [data-modal])._hv_op:hover,
	a[href]:hover ._hv_op,
	button._hv_op:hover,
	._hv_op a[href]:hover {
		opacity: 0.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) + 3rem);
}
:where([id]:not(style):not(script)) {
	scroll-margin-top: calc(var(--header-height) + 3rem);
}
:where([id]._scroll-margin-top0, #header) {
	scroll-margin-top: 0 !important;
}
:where([id]._scroll-margin-top-fit) {
	scroll-margin-top: var(--header-height);
}

/* w
====================================================================== */
._w {
	position: relative;
	@media screen and (min-width: 744px), print {
		width: var(--base-width);
		margin-inline: auto;
		&.-s {
			width: var(--base-width-s);
		}
	}
}

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

/* header
====================================================================== */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	@media print {
		position: absolute;
	}
	@media screen and (min-width: 744px), print {
		.logo {
			position: absolute;
			left: 5rem;
			top: calc(5rem - 1.8rem / 2 - 1rem);
			line-height: 1;
			a {
				display: block;
				padding: 1rem;
				svg {
					fill: var(--color-base);
					stroke: none;
					width: 27.2rem;
				}
			}
		}
		nav {
			position: absolute;
			right: 4rem;
			top: calc(5rem - 2.8rem / 2 - 1rem);
			display: flex;
			align-items: center;
			gap: 2.5rem;
			.gnav {
				display: flex;
				align-items: center;
				gap: 1rem;
				line-height: 1.5;
				a {
					position: relative;
					display: block;
					padding: 1rem;
					text-decoration: none;
					font-size: 1.6rem;
					color: var(--color-base);
					letter-spacing: .04em;
					.slash {
						font-size: 80%;
					}
				}
			}
			.sns {
				line-height: 1;
				a {
					display: block;
					padding: 1rem;
					svg {
						fill: var(--color-base);
						width: 2.8rem;
					}
				}
			}
			@media (hover) {
				a:hover {
					opacity: 0.5;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		.logo {
			position: absolute;
			left: 0;
			top: 0;
			line-height: 1;
			z-index: 15;
			a {
				display: flex;
				justify-content: center;
				align-items: center;
				height: var(--header-height);
				padding-inline: 2rem;
				svg {
					width: 19.8rem;
				}
			}
		}
		.nav_btn {
			position: absolute;
			top: 0;
			right: 0;
			width: 5.4rem;
			height: var(--header-height);
			z-index: 15;
			a {
				position: relative;
				display: block;
				overflow: hidden;
				height: 0;
				padding-top: var(--header-height);
				text-decoration: none;
				font-size: 1rem;
			}
			&::before,
			a::before,
			a::after {
				content: "";
				position: absolute;
				width: 2rem;
				left: calc(50% - 1rem);
				top: calc(50% - .1rem);
				border-top: 2px solid var(--color-base);
				pointer-events: none;
				transition: transform var(--transition), opacity var(--transition);
				z-index: 2;
			}
			a::before {
				transform: translateY(-.8rem);
			}
			a::after {
				transform: translateY(.8rem);
			}
		}
		.-headeropen & .nav_btn {
			&::before {
				opacity: 0;
			}
			a::before {
				transform: translate(0) rotate(-45deg);
			}
			a::after {
				transform: translate(0) rotate(45deg);
			}
		}
		nav {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-inline: 5rem;
			background-color: #fff;
			padding-block: calc(var(--header-height) * 2) calc(var(--header-height) * 3);
			transition: opacity var(--transition), transform var(--transition);
			z-index: 5;
			opacity: 0!important;
			pointer-events: none;
			.gnav a {
				display: block;
				padding: 1rem;
				font-size: 1.8rem;
				line-height: 1.5;
				text-decoration: none;
				color: var(--color-base);
				.slash {
					font-size: 80%;
				}
			}
			.sns {
				display: flex;
				margin-top: 3rem;
				line-height: 1;
				a {
					display: block;
					padding: 1rem;
					img {
						width: 2.8rem;
					}
				}
			}
		}
		.-headeropen & nav {
			opacity: 1!important;
			pointer-events: auto;
		}
	}

	transition: transform 0.4s ease;
	.menu-hidden:not(.-headeropen) & {
		@media screen and (min-width: 744px), print {
			transform: translateY(-7.5rem);
		}
		@media screen and (max-width: 743px) {
			transform: translateY(-5.4rem);
		}
	}
}
body:has(._head_dark) #header {
	@media screen and (min-width: 744px), print {
		.logo, nav {
			transition: filter .3s ease;
		}
		&:not(.-default-color) {
			.logo, nav {
				filter: brightness(0) invert(1);
			}
		}
	}
	@media screen and (max-width: 743px) {
		.logo, .nav_btn {
			transition: filter .3s ease;
		}
		&:not(.-default-color) {
			.logo, .nav_btn {
				filter: brightness(0) invert(1);
			}
		}
		.-headeropen & {
			.logo, .nav_btn {
				filter: none;
			}
		}
	}
}

/* footer
====================================================================== */
#footer {
	position: relative;
	padding-block: 11rem;
	background-color: var(--bg-gray);
	.logo {
		margin-bottom: 10rem;
		a {
			display: inline-block;
			padding-block: 1rem;
			img {
				width: 41rem;
			}
		}
	}
	.address {
		margin-top: 2rem;
		font-size: 1.4rem;
		line-height: calc(24 / 14);
	}
	small {
		font-size: 1.4rem;
		line-height: 1;
		text-transform: uppercase;
	}
	@media screen and (min-width: 744px), print {
		small {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 5rem 4rem;
		text-align: center;
		.logo {
			margin-bottom: 4rem;
			a {
				img {
					width: 22rem;
				}
			}
		}
		.address {
			margin-top: 1rem;
			font-size: 1.1rem;
		}
		small {
			display: block;
			margin-top: 3rem;
			font-size: 0.8rem;
		}
	}
}


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

	パーツ

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

/* margin / padding
====================================================================== */
._base_p {
	padding-top: 10rem;
	padding-bottom: 13rem;
	@media screen and (max-width: 743px) {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}
._base_pb {
	padding-bottom: 13rem;
	@media screen and (max-width: 743px) {
		padding-bottom: 6rem;
	}
}

/* page_title
====================================================================== */
.page_title {
	padding-block: 14rem 8rem;
	text-align: center;
	font-size: 6rem;
	line-height: 1.4;
	letter-spacing: .05em;
	@media screen and (max-width: 743px) {
		padding-block: 8.6rem 3rem;
		font-size: 2.7rem;
	}
	&.-s {
		font-size: 4rem;
		@media screen and (max-width: 743px) {
			font-size: 1.8rem;
		}
	}
	.slash {
		font-size: 80%;
	}
}

/* title
====================================================================== */
.vertical_title {
	width: 25rem;
	display: flex;
	justify-content: center;
	flex-direction: row-reverse;
	gap: 1.5rem;
	margin-inline: auto;
	margin-bottom: 7rem;
	padding-bottom: 5rem;
	border-bottom: 1px solid var(--border);
	font-size: 3.5rem;
	line-height: 1.2;
	letter-spacing: 0.15em;
	.line {
		writing-mode: vertical-rl;
		font-feature-settings: normal;
	}
	@media screen and (max-width: 743px) {
		width: 14rem;
		gap: 1rem;
		margin-bottom: 4rem;
		padding-bottom: 4rem;
		font-size: 2.3rem;
		line-height: 1.2;
	}
}

.line_title {
	width: fit-content;
	min-width: 25rem;
	margin-bottom: 6rem;
	padding-bottom: 5rem;
	border-bottom: 1px solid var(--border);
	font-size: 3.5rem;
	line-height: calc(58 / 35);
	@media screen and (max-width: 743px) {
		min-width: 0;
		margin-bottom: 4rem;
		padding-bottom: 1.5rem;
		font-size: 2.3rem;
		line-height: 1.2;
		&.-sp-center {
			margin-inline: auto;
		}
	}
}

.center_title {
	margin-bottom: 3rem;
	text-align: center;
	font-size: 2.5rem;
	line-height: 1.6;
	@media screen and (max-width: 743px) {
		margin-bottom: 1.5rem;
		font-size: 1.6rem;
	}
	&.-l {
		margin-bottom: 4rem;
		font-size: 3.5rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 1.5rem;
			font-size: 2.3rem;
		}
	}
}
.center_title_notes {
	margin-bottom: 3rem;
	margin-top: -1.5rem;
	text-align: center;
	@media screen and (max-width: 743px) {
		margin-bottom: 3rem;
		margin-top: -.8rem;
	}
}

/* main_img
====================================================================== */
.main_img {
	margin-bottom: 15rem;
	@media screen and (max-width: 743px) {
		margin-bottom: 7rem;
	}
	&:has(.lead_text) {
		margin-bottom: 12rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 6rem;
		}
	}
	.img {
		height: 50rem;
		@media screen and (max-width: 743px) {
			height: 15rem;
		}
	}
	.lead_text {
		position: relative;
		max-width: 107.6rem;
		margin-top: -3rem;
		margin-inline: auto;
		font-weight: var(--font-weight-bold);
		z-index: 2;
		.lead {
			font-size: 4rem;
			line-height: calc(64 / 40);
			.box {
				display: block;
				width: fit-content;
				background-color: #fff;
				padding-left: 1.5rem;
			}
		}
		.text {
			padding: 1.5rem 1rem 1.5rem 1.5rem;
			background-color: #fff;
			font-size: 1.8rem;
			line-height: calc(30 / 18);
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			justify-content: space-between;
			align-items: start;
			.text {
				margin-top: 1.2rem;
				margin-right: 4.6rem;
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: -1.5rem;
			.lead {
				font-size: 1.8rem;
				.box {
					padding-left: 1rem;
					padding-block: .15em;
					& + .box {
						margin-top: -.3em;
					}
				}
			}
			.text {
				width: fit-content;
				margin-top: 1rem;
				padding: 1rem 1rem 1rem 1rem;
				font-size: 1.2rem;
			}
		}
	}
}

/* contents_nav
====================================================================== */
.contents_nav {
	padding-block: 10rem 8rem;
	text-align: center;
	.title {
		display: flex;
		justify-content: center;
		align-items: end;
		gap: 4rem;
		margin-bottom: 4rem;
		font-size: 2.4rem;
		.en {
			font-size: 6rem;
			line-height: 1;
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 7rem;
		.title {
			display: block;
			margin-bottom: 3rem;
			font-size: 1.8rem;
			.en {
				display: block;
				margin-bottom: 0.6rem;
				font-size: 2.7rem;
			}
		}
	}
}

/* arrow_link
====================================================================== */
.arrow_link {
	display: flex;
	align-items: center;
	width: fit-content;
	font-size: 1.8rem;
	line-height: 1.5;
	text-decoration: none;
	&.-center {
		margin-inline: auto;
	}
	&.-right {
		margin-left: auto;
	}
	.txt {
		--line-width: 16rem;
		position: relative;
		padding-right: var(--line-width);
		&::after {
			content: "";
			position: absolute;
			right: 1em;
			top: calc(50% - 1px);
			width: calc(var(--line-width) - 2em);
			border-top: 2px solid;
		}
	}
	.arrow {
		position: relative;
		width: 5.4rem;
		height: 5.4rem;
		background-color: var(--color-base);
		border: 2px solid var(--color-base);
		border-radius: 100%;
		&::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background: url(../img/arrow.svg) no-repeat 50%;
			background-size: calc(20 / 54 * 100%);
			filter: brightness(0) invert(1);
		}
	}
	&.-white {
		color: #fff;
		.arrow {
			background-color: #fff;
			border-color: #fff;
			&::after {
				filter: brightness(1) invert(0);
			}
		}
	}
	@media (hover) {
		.arrow {
			transition: background var(--transition);
			&::after {
				transition: filter var(--transition);
			}
		}
		&:not(.-white):hover {
			color: #000;
			.arrow {
				background-color: #fff;
				&::after {
					filter: brightness(1) invert(0);
				}
			}
		}
		&.-white:hover {
			.arrow {
				background-color: var(--color-base);
				&::after {
					filter: brightness(0) invert(1);
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		font-size: 1.2rem;
		&.-sp-right {
			margin-inline: auto 0;
		}
		.txt {
			--line-width: 11rem;
			&::after {
				border-top-width: 1px;
			}
		}
		&.-sp-line-s .txt {
			--line-width: 6rem;
		}
		.arrow {
			width: 3.7rem;
			height: 3.7rem;
		}
	}
	&.-back {
		flex-direction: row-reverse;
		.txt {
			padding-right: 0;
			padding-left: var(--line-width);
			&::after {
				right: auto;
				left: 1em;
			}
		}
		.arrow {
			transform: scaleX(-1);
		}
	}
}

/* more_btn
====================================================================== */
.more_btn {
	margin-top: 12rem !important;
	@media screen and (max-width: 743px) {
		margin-top: 5rem !important;
	}
}

/* box_btn
====================================================================== */
.box_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 31rem;
	height: 6rem;
	background-color: var(--color-base);
	border: 2px solid var(--color-base);
	border-radius: 3rem;
	color: #fff;
	text-decoration: none;
	font-size: 2rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.5;
	@media (hover) {
		&:hover {
			background-color: #fff;
			color: var(--color-base);
		}
	}
	&.-center {
		margin-inline: auto;
	}
	&.-outline {
		background-color: #fff;
		color: var(--color-base);
		@media (hover) {
			&:hover {
				opacity: 0.5;
			}
		}
	}
	@media screen and (max-width: 743px) {
		width: 17rem;
		height: 5rem;
		font-size: 1.6rem;
	}
}

/* acc
====================================================================== */
._acc {
	overflow: hidden;
	height: 0;
	transition: height var(--transition);
}

/* column_text
====================================================================== */
.column_text {
	@media screen and (min-width: 744px), print {
		width: 104rem;
		margin-inline: auto;
		display: flex;
		.row {
			flex: 1;
			padding-left: 5rem;
			white-space: nowrap;
		}
	}
	@media screen and (max-width: 743px) {
		.row + .row {
			margin-top: 1lh;
		}
	}
}

/* basic_dl_table
====================================================================== */
.basic_dl_table {
	border-top: 1px solid #b6b6b6;
	dl {
		padding: 1.2rem 1rem;
		border-bottom: 1px solid #b6b6b6;
		@media screen and (min-width: 744px), print {
			display: flex;
			dt {
				width: 10em;
				flex-shrink: 0;
			}
		}
		@media screen and (max-width: 743px) {
			padding: 1.5rem 1rem;
		}
	}
}


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

/* paragraph_ph
====================================================================== */
.paragraph_ph {
	margin-block: 8rem;
	&:first-child {
		margin-top: 0;
	}
	&:last-child {
		margin-bottom: 0;
	}
	img {
		border-radius: 1rem;
	}
	@media screen and (max-width: 743px) {
		margin-block: 4rem;
		img {
			border-radius: .5rem;
		}
	}
}


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

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

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

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

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

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

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

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

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

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

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



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

	CONCEPT

============================================================================= */
.concept_contents {
	position: relative;
	margin-top: 10rem;
	@media screen and (min-width: 744px), print {
		max-width: 148rem;
		width: calc(100% - 2rem * 2);
		margin-inline: auto;
	}
	@media screen and (max-width: 743px) {
		margin-top: 4rem;
	}
	.ph {
		overflow: hidden;
		border-radius: 1rem;
		&.-ph1 {
			margin-bottom: 10rem;
		}
		@media screen and (max-width: 743px) {
			border-radius: .5rem;
			&.-ph1 {
				margin-bottom: 4rem;
			}
		}
	}

	.grid {
		@media screen and (min-width: 744px), print {
			display: flex;
			flex-wrap: wrap;
			& > * {
				width: 50%;
			}
			.ph.-ph3 {
				order: 5;
			}
			.text1 {
				margin-bottom: 8rem;
			}
			.ph2_text,
			.ph3_text {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			.text1.-l,
			.ph3_text {
				& > * {
					width: 55rem;
					margin-left: auto;
				}
			}
			.text1.-r,
			.ph2_text {
				padding-left: 8rem;
			}
		}
		@media screen and (max-width: 743px) {
			.text1 {
				margin-bottom: 1lh;
				padding-left: 1rem;
			}
			.ph.-ph2 {
				width: 50%;
				margin-top: 4rem;
			}
			.ph.-ph3 {
				width: 50%;
				margin-left: auto;
				margin-bottom: 4rem;
			}
			.ph2_text,
			.ph3_text {
				padding-left: 1rem;
				margin-top: 1lh;
			}
		}
	}
}
.concept_foot_image {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	height: 34rem;
	pointer-events: none;
	z-index: -1;
	@media screen and (max-width: 743px) {
		height: 9rem;
	}
}
*:has(> .concept_foot_image) {
	position: relative;
	padding-bottom: 46rem;
	z-index: 2;
	@media screen and (max-width: 743px) {
		padding-bottom: 12rem;
	}
}


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

	RECRUIT

============================================================================= */
.recruit_contents {
	& > * + * {
		margin-top: 8rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
	}
	.note {
		margin-top: 8rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
	}
}


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

	COMPANY

============================================================================= */
.company_map {
	margin-top: 10rem;
	@media screen and (max-width: 743px) {
		margin-top: 4rem;
	}
	.map iframe {
		width: 100%;
		height: 42rem;
		@media screen and (max-width: 743px) {
			height: 20rem;
		}
	}
	.info {
		margin-top: 2rem;
		@media screen and (min-width: 744px), print {
			display: flex;
			justify-content: center;
			gap: 2rem;
		}
		@media screen and (max-width: 743px) {
			margin-top: 1.5rem;
		}
	}
}


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

	WORKS

============================================================================= */
.works_list {
	a {
		display: block;
		text-decoration: none;
		color: var(--color-base);
		font-size: 1.8rem;
		line-height: 1.6;
		.img {
			position: relative;
			overflow: hidden;
			width: 100%;
			margin-top: 2rem;
			aspect-ratio: 580 / 400;
			&.-noimage {
				background: #fff url(../img/logo.svg) no-repeat 50%;
				background-size: calc(210 / 380 * 100%);
				border: 1px solid;
			}
		}
		h3 {
			font-weight: var(--font-weight);
		}
	}
	@media screen and (min-width: 744px), print {
		display: flex;
		flex-wrap: wrap;
		gap: 7rem 4rem;
		& > * {
			width: calc((100% - 4rem * 1) / 2);
		}
		a {
			display: flex;
			flex-direction: column;
			height: 100%;
			h3 {
				margin-top: auto;
			}
		}
	}
	@media screen and (max-width: 743px) {
		& > * + * {
			margin-top: 4rem;
		}
		a {
			font-size: 1.2rem;
			.img {
				margin-top: 1rem;
			}
		}
	}
	&.-s {
		@media screen and (min-width: 744px), print {
			gap: 2rem;
			& > * {
				width: calc((100% - 2rem * 2) / 3);
			}
			a {
				font-size: 1.4rem;
				.img {
					margin-top: 1.5rem;
				}
			}
		}
	}
}

.works_detail {
	padding-top: 18rem;
	@media screen and (max-width: 743px) {
		padding-top: 9rem;
	}
	.works_detail_header {
		margin-bottom: 7rem;
		text-align: center;
		font-weight: var(--font-weight-bold);
		font-size: 2.4rem;
		line-height: 1.5;
		h1 {
			margin-bottom: 1rem;
			font-size: 3.5rem;
			line-height: calc(58 / 35);
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 3rem;
			font-size: 1.2rem;
			h1 {
				font-size: 1.6rem;
			}
		}
	}
	.works_phs {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 2.6rem;
		margin-top: 2.6rem;
		img {
			width: 100%;
			/* height: auto;
			aspect-ratio: 1200 / 800;
			object-fit: cover; */
		}
		& > * {
			width: 100%;
			&.-col2,
			&.-v {
				width: calc((100% - 2.6rem) / 2);
			}
			&.-v img {
				/* aspect-ratio: 800 / 1200; */
			}
		}
		@media screen and (max-width: 743px) {
			gap: .6rem;
			margin-top: .6rem;
			& > .-v {
				width: calc((100% - .6rem) / 2);
			}
		}
	}
	.works_body {
		padding: 12rem 14rem;
		@media screen and (max-width: 743px) {
			padding: 4rem 0 6rem;
		}
	}

	.works_other {
		padding-block: 6rem;
		border-top: 1px solid var(--border);
		h2 {
			margin-bottom: 5rem;
			font-size: 3rem;
			line-height: 1.5;
			text-align: center;
		}
		@media screen and (max-width: 743px) {
			padding: 5rem 1rem 4rem;
			h2 {
				margin-bottom: 3rem;
				font-size: 2.3rem;
			}
		}
	}

	.back_btn {
		padding-block: 9rem 13rem;
		border-top: 1px solid var(--border);
		@media screen and (max-width: 743px) {
			padding-block: 7rem 8rem;
		}
	}
}


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

	NEWS

============================================================================= */
.news_list {
	a {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		text-decoration: none;
		color: var(--color-base);
		font-size: 1.6rem;
		line-height: 1.6;
		text-align: center;
		time {
			font-size: 1.4rem;
		}
		.cat {
			margin-left: auto;
			min-width: 8.4rem;
			padding: 0.5rem 1rem;
			background-color: #fff;
			border: 1px solid;
			border-radius: 10rem;
			text-align: center;
			font-size: 1.2rem;
			line-height: 1.2;
			font-weight: var(--font-weight-bold);
			&:empty {
				visibility: hidden;
				&::before {
					content: ".";
				}
			}
		}
		.img {
			position: relative;
			overflow: hidden;
			width: 100%;
			margin-top: 1.5rem;
			aspect-ratio: 380 / 250;
			&.-noimage {
				background: #fff url(../img/logo.svg) no-repeat 50%;
				background-size: calc(210 / 380 * 100%);
				border: 1px solid;
			}
		}
		h3 {
			width: 100%;
			margin-top: 2rem;
			font-weight: var(--font-weight);
		}
		.more {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.8rem;
			margin-top: 1rem;
			font-size: 1.4rem;
			.arrow {
				position: relative;
				width: 2rem;
				height: 2rem;
				background-color: var(--color-base);
				border: 1px solid var(--color-base);
				border-radius: 100%;
				&::after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					background: url(../img/arrow.svg) no-repeat 50%;
					background-size: calc(10 / 20 * 100%);
					filter: brightness(0) invert(1);
				}
			}
		}
		@media (hover) {
			.arrow {
				transition: background var(--transition);
				&::after {
					transition: filter var(--transition);
				}
			}
			&:hover {
				.arrow {
					background-color: #fff;
					&::after {
						filter: brightness(1) invert(0);
					}
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		display: flex;
		flex-wrap: wrap;
		gap: 9rem 3rem;
		& > * {
			width: calc((100% - 3rem * 2) / 3);
		}
	}
	@media screen and (max-width: 743px) {
		& > * + * {
			margin-top: 4rem;
		}
		a {
			font-size: 1.4rem;
			time {
				font-size: 1rem;
			}
			.cat {
				min-width: 7.2rem;
				padding: 0.4rem 1rem;
				font-size: 0.9rem;
			}
			.img {
				margin-top: .8rem;
			}
			h3 {
				margin-top: 1.5rem;
			}
			.more {
				margin-top: .6rem;
				font-size: 0.9rem;
				.arrow {
					width: 1.6rem;
					height: 1.6rem;
				}
			}
		}
	}
}

.news_detail {
	margin-block: 20rem 10rem;
	@media screen and (max-width: 743px) {
		margin-block: 8rem 5rem;
	}
	.news_detail_contents {
		padding: 5rem 14rem 10rem;
		@media screen and (max-width: 743px) {
			padding: 3rem 2rem 6rem;
		}
	}
	.news_detail_header {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 2rem;
		margin-bottom: 5rem;
		line-height: 1.5;
		time {
			flex-shrink: 0;
			font-size: 1.4rem;
		}
		.category {
			display: flex;
			flex-wrap: wrap;
			gap: .5rem 1rem;
			align-items: center;
			li {
				padding: 0.2rem 1.5rem;
				background-color: #fff;
				border: 1px solid;
				border-radius: 10rem;
				font-size: 1.2rem;
				line-height: 1.5;
				font-weight: 700;
			}
		}
		h1 {
			width: 100%;
			font-size: 3.5rem;
			line-height: calc(58 / 35);
		}
		@media screen and (max-width: 743px) {
			justify-content: space-between;
			gap: 3rem 1rem;
			margin-bottom: 3rem;
			time {
				font-size: 1.1rem;
			}
			.category {
				gap: .3rem .6rem;
				li {
					padding: 0.2rem 1rem;
					font-size: 1rem;
				}
			}
			h1 {
				font-size: 1.6rem;
				line-height: calc(26 / 16);
			}
		}
	}
	.back_btn {
		margin-top: 8rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
	}
}

.detail_main_img img {
	width: 100%;
}

.wp-pagenavi {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 14rem;
	gap: 2rem;
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		gap: 1rem;
	}
	& > *:not(.nextpostslink):not(.previouspostslink) {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4.6rem;
		height: 4.6rem;
		padding-bottom: .5rem;
		background-color: #dedede;
		border-radius: 2.3rem;
		text-decoration: none;
		color: var(--color-base);
		font-size: 2.2rem;
		z-index: 2;
		@media screen and (max-width: 743px) {
			width: 3.2rem;
			height: 3.2rem;
			padding-bottom: .1rem;
			font-size: 1.5rem;
		}
		&.current {
			background-color: var(--color-base);
			color: #fff;
		}
		@media (hover) {
			&:hover {
				background-color: var(--color-base);
				color: #fff;
			}
		}
	}
	.nextpostslink,
	.previouspostslink {
		position: relative;
		overflow: hidden;
		width: 4.6rem;
		height: 4.6rem;
		text-indent: -10rem;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url(../img/arrow-l.svg) no-repeat 50%;
			background-size: 3rem;
		}
		@media screen and (max-width: 743px) {
			width: 3.2rem;
			height: 3.2rem;
			&::before {
				background-image: url(../img/arrow.svg);
				background-size: 2rem;
			}
		}
		@media (hover) {
			&:hover {
				opacity: 0.5;
			}
		}
	}
	.nextpostslink {
		@media screen and (min-width: 744px), print {
			margin-left: 1rem;
		}
	}
	.previouspostslink {
		transform: scaleX(-1);
		@media screen and (min-width: 744px), print {
			margin-right: 1rem;
		}
	}
	.extend {
		display: none;
	}
}

.news_body,
.works_body {
	h2 {
		font-size: 150%;
		line-height: 1.5;
		&:not(:first-child) {
			margin-top: 5rem;
			@media screen and (max-width: 743px) {
				margin-top: 3rem;
			}
		}
	}
	h3 {
		font-size: 120%;
		line-height: 1.5;
		&:not(:first-child) {
			margin-top: 5rem;
			@media screen and (max-width: 743px) {
				margin-top: 3rem;
			}
		}
	}
}


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

	EVENT

============================================================================= */
.event_detail {
	margin-block: 20rem 14rem;
	@media screen and (max-width: 743px) {
		margin-block: 8rem 5rem;
	}
	.event_detail_header {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 2rem;
		margin-bottom: 4rem;
		line-height: 1.5;
		padding: 10rem 14rem 0;
		.date {
			flex-shrink: 0;
			font-size: 1.4rem;
		}
		.tag {
			padding: 0.2rem 1.5rem;
			background-color: #fff;
			border: 1px solid;
			border-radius: 10rem;
			font-size: 1.2rem;
			line-height: 1.5;
			font-weight: 700;
		}
		h1 {
			width: 100%;
			font-size: 3.5rem;
			line-height: calc(58 / 35);
		}
		@media screen and (max-width: 743px) {
			justify-content: space-between;
			gap: 1rem 1rem;
			margin-bottom: 2rem;
			padding: 3rem 2rem 0;
			.date {
				font-size: 1.1rem;
			}
			.tag {
				padding: 0.2rem 1rem;
				font-size: 1rem;
			}
			h1 {
				font-size: 1.6rem;
				line-height: calc(26 / 16);
			}
		}
	}
	.event_detail_contents {
		margin-top: 8rem;
		padding: 0 14rem 10rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
			padding: 0 2rem 6rem;
		}
		.event_gallery {
			margin-top: 8rem;
			li {
				margin-top: 2.6rem;
				img {
					width: 100%;
				}
			}
			@media screen and (max-width: 743px) {
				margin-top: 4rem;
				li {
					margin-top: .6rem;
				}
			}
		}
		.event_form {
			margin-top: 12rem;
			@media screen and (max-width: 743px) {
				margin-top: 6rem;
			}
		}
		.event_calendar {
			margin-top: 7rem;
			@media screen and (max-width: 743px) {
				margin-top: 2rem;
			}
			.icons {
				display: flex;
				justify-content: end;
				gap: 2rem;
				@media screen and (max-width: 743px) {
					flex-wrap: wrap;
					justify-content: start;
					gap: 0 1.5em;
					font-size: 1rem;
				}
			}
			.month {
				margin-top: 2rem;
				@media screen and (max-width: 743px) {
					margin-top: 1rem;
				}
				.month__head {
					padding-block: 1.8rem 2rem;
					background-color: var(--color-base);
					color: #fff;
					text-align: center;
					font-weight: var(--font-weight-bold);
					font-size: 3rem;
					line-height: 1.3;
					@media screen and (max-width: 743px) {
						padding-block: 0.5rem;
						font-size: 1.2rem;
					}
				}
				.calendar {
					--space: 1.2rem;
					width: calc(100% + var(--space) * 2);
					margin-left: calc(var(--space) * -1);
					table-layout: fixed;
					border-collapse: separate;
					border-spacing: var(--space);
					font-size: 2.5rem;
					font-weight: var(--font-weight-bold);
					@media screen and (max-width: 743px) {
						--space: .3rem;
						font-size: 1.2rem;
					}
					thead th {
						text-align: center;
						font-weight: var(--font-weight-bold);
						@media screen and (max-width: 743px) {
							font-size: 1rem;
						}
						&.-sun {
							color: #CB0000;
						}
						&.-sat {
							color: #0097D9;
						}
					}
					tbody td {
						text-align: center;
						background-color: #fff;

						& > div {
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
							aspect-ratio: 1;
							line-height: 1.5;
							padding-bottom: 1rem;
							border: .5rem solid #fff;
							transition: background var(--transition), border var(--transition);
							@media screen and (max-width: 743px) {
								padding-bottom: 0;
							}
						}
						&.-has > div {
							cursor: pointer;
						}
						&.-selected > div {
							background-color: #dedede;
							border-color: #dedede;
						}
						@media (hover) {
							&.-has:hover > div {
								border-color: #dedede;
							}
						}
					}
				}
			}
			.time_select {
				margin-top: 4rem;
				@media screen and (max-width: 743px) {
					margin-top: 2rem;
				}
				dt {
					margin-bottom: 1rem;
				}
				dd {
					font-size: 2.5rem;
					font-weight: var(--font-weight-bold);
				}
				.empty {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 9rem;
					background-color: #fff;
					text-align: center;
					font-size: 2rem;
					@media screen and (max-width: 743px) {
						height: 6rem;
						font-size: 1.1rem;
						line-height: 1.6;
					}
				}
				&:has(.times) .empty {
					display: none;
				}
				.times {
					display: flex;
					flex-wrap: wrap;
					gap: 1.2rem;
					@media screen and (max-width: 743px) {
						gap: .6rem;
					}
					li {
						width: calc((100% - 1.2rem * 2) / 3);
						display: flex;
						align-items: center;
						justify-content: center;
						height: 9rem;
						background-color: #fff;
						border: .5rem solid #fff;
						text-align: center;
						cursor: pointer;
						transition: background var(--transition), border var(--transition);
						@media screen and (max-width: 743px) {
							width: calc((100% - .6rem * 1) / 2);
							height: 3rem;
							font-size: 1.2rem;
						}
						&.-selected {
							background-color: #dedede;
							border-color: #dedede;
						}
						@media (hover) {
							&:hover {
								border-color: #dedede;
							}
						}
						&.-disabled {
							pointer-events: none;
							color: #ccc;
						}
					}
				}
			}
		}
	}

	.event_form_items {
		margin-top: 10rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
		display: none;
		opacity: 1;
		.form_title {
			margin-bottom: 5rem;
			font-weight: var(--font-weight-bold);
			font-size: 2.5rem;
			line-height: 1.5;
			text-align: center;
			@media screen and (max-width: 743px) {
				margin-bottom: 2rem;
				font-size: 1.6rem;
			}
		}
		&.-show {
			display: block;
			animation: fadeIn .3s;
		}
		&.-confirm {
			display: block;
			opacity: 1;
		}
		#entry_date {
			font-size: 2rem;
			@media screen and (max-width: 743px) {
				font-size: 1.4rem;
			}
		}
	}


	.event_other {
		margin-top: 16rem;
		padding-block: 6rem;
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		h2 {
			margin-bottom: 5rem;
			font-size: 3rem;
			line-height: 1.5;
			text-align: center;
		}
		.event_list {
			display: flex;
			justify-content: space-between;
			article {
				width: 56.6rem;
				a {
					display: flex;
					align-items: start;
					gap: 3rem;
					text-decoration: none;
					.img {
						flex-shrink: 0;
						width: 28rem;
						aspect-ratio: 380 / 250;
						&.-noimage {
							background: #fff url(../img/logo.svg) no-repeat 50%;
							background-size: calc(210 / 380 * 100%);
							border: 1px solid;
						}
					}
					.date {
						margin-bottom: 1rem;
						font-size: 1.4rem;
						line-height: 1.5;
					}
					.tag {
						width: fit-content;
						padding: 0.5rem 1.5rem;
						background-color: #fff;
						border: 1px solid;
						border-radius: 10rem;
						font-size: 1.2rem;
						line-height: 1.5;
						font-weight: 700;
					}
					h3 {
						margin-top: 2.2rem;
						font-weight: var(--font-weight);
					}
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
			padding-block: 3rem 4rem;
			h2 {
				margin-bottom: 3rem;
				font-size: 2.3rem;
			}
			.event_list {
				flex-direction: column;
				gap: 4rem;
				article {
					width: auto;
					a {
						flex-wrap: wrap;
						align-items: center;
						gap: 0;
						.img {
							width: 100%;
							margin-block: .6rem 1.5rem;
							order: 3;
						}
						.content {
							display: contents;
						}
						.date {
							margin-bottom: 0;
							font-size: 1rem;
							order: 1;
						}
						.tag {
							margin-left: auto;
							padding: 0.3rem 1.5rem;
							font-size: 1rem;
							order: 2;
						}
						h3 {
							width: 100%;
							margin-top: 0;
							text-align: center;
							order: 4;
						}
					}
				}
			}
		}
	}

	.back_btn {
		margin-top: 12rem;
		@media screen and (max-width: 743px) {
			margin-top: 6rem;
		}
	}
}
@keyframes fadeIn {
	from {opacity: 0}
	to {opacity: 1}
}



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

	FORM

============================================================================= */
.form_head {
	padding-block: 7rem;
	text-align: center;
	@media screen and (max-width: 743px) {
		padding-block: 3rem;
		text-align: left;
	}
}
.form_tab {
	margin-bottom: 8rem;
	border-bottom: 1px solid var(--border);
	@media screen and (max-width: 743px) {
		margin-bottom: 3rem;
	}
	ul {
		display: flex;
		gap: 2rem;
		max-width: 100rem;
		margin-inline: auto;
		@media screen and (max-width: 743px) {
			gap: .6rem;
		}
		li {
			width: 100%;
			label {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 7.8rem;
				font-size: 2.4rem;
				line-height: 1.5;
				font-weight: var(--font-weight-bold);
				border: 1px solid var(--border);
				border-bottom-width: 0;
				border-radius: 1rem 1rem 0 0;
				background-color: #efefef;
				transition: background .1s ease-in-out;
				@media screen and (max-width: 743px) {
					height: 7rem;
					font-size: 1.3rem;
					line-height: calc(18 / 16);
				}
				&::after {
					content: "";
					position: absolute;
					right: 0;
					left: 0;
					bottom: -1rem;
					height: 2rem;
					background-color: #fff;
					opacity: 0;
					transition: opacity .1s ease-in-out;
				}
				&:has(input:checked) {
					background-color: #fff;
					&::after {
						opacity: 1;
					}
				}
			}
		}
	}
}
.form_contents {
	max-width: 100rem;
	margin-inline: auto;
	.form_item {
		margin-bottom: 3rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 2rem;
		}
		@media screen and (min-width: 744px), print {
			&:not(.-wide) {
				display: flex;
				align-items: start;
				gap: 2rem;
				& > dt {
					position: relative;
					width: 23rem;
					flex-shrink: 0;
					display: flex;
					min-height: 5rem;
					align-items: center;
					line-height: calc(25 / 18);
					.hissu {
						position: absolute;
						right: 0;
					}
				}
				& > dd {
					flex-grow: 1;
				}
			}
			&.-wide {
				& > dt {
					margin-bottom: 1rem;
				}
			}
		}
		& > dt {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 0 1rem;
			@media screen and (max-width: 743px) {
				margin-bottom: .7rem;
				br {
					display: none;
				}
			}
		}
		.hissu {
			display: inline-block;
			padding: 0.3rem 0.8rem;
			background-color: var(--color-base);
			color: #fff;
			font-size: 1.2rem;
			border-radius: 2rem;
			@media screen and (max-width: 743px) {
				font-size: 1rem;
				line-height: 1.2;
			}
		}
		.h_checkbox ul {
			display: flex;
			flex-wrap: wrap;
			gap: 2em;
		}
		.radio_text {
			@media screen and (min-width: 744px), print {
				display: flex;
				gap: 2rem;
				margin-bottom: 1rem;
				.text {
					flex-grow: 1;
				}
			}
		}
		.notes {
			font-size: 1.6rem;
			line-height: 1.6;
			@media screen and (max-width: 743px) {
				font-size: 1rem;
			}
		}
		.notes2 {
			margin-top: 1rem;
			font-size: 1.4rem;
			line-height: 1.6;
			@media screen and (max-width: 743px) {
				font-size: 1rem;
			}
		}
		.file_box {
			position: relative;
			padding: 1rem 5rem 1rem 1rem;
			border: 1px solid var(--border);
			@media screen and (max-width: 743px) {
				padding: 1rem;
			}
			&.-confirm {
				border: 0;
				padding: 0;
			}
			.btn_line {
				display: flex;
				align-items: center;
				gap: 2rem;
				color: #9B9B9B;
				.uploader__btn {
					width: 15rem;
					height: 3.4rem;
					background-color: #DEDEDE;
					border-radius: 0.7rem;
					font-size: 1.6rem;
					color: var(--color-base);
				}
				.placeholder {
					pointer-events: none;
				}
				@media screen and (max-width: 743px) {
					flex-direction: column;
					align-items: start;
					gap: .5rem;
					.uploader__btn {
						width: 11rem;
						height: 2.6rem;
						font-size: 1.2rem;
					}
					.placeholder {
						font-size: 1.2rem;
						line-height: 1.4;
					}
				}
			}
			&.-max .btn_line {
				display: none;
			}
			.uploader__count {
				position: absolute;
				right: 1rem;
				top: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				font-size: 1.6rem;
				@media screen and (max-width: 743px) {
					top: auto;
					bottom: 1rem;
					font-size: 1.1rem;
				}
			}
			.uploader__list {
				&:not(:has(li)) {
					display: none;
				}
				margin-bottom: 1rem;
				font-size: 1.6rem;
				line-height: 1.5;
				li {
					position: relative;
					background: no-repeat 1rem;
					background-size: 2.4rem;
					padding: .5em 4rem .5em 4rem;
					border: 1px solid #ccc;
					border-radius: 0.5rem;
					@media screen and (max-width: 743px) {
						padding: .5em 2rem .5em 3rem;
						background-position: 0.5rem;
						background-size: 2rem;
						font-size: 1.2rem;
					}
					& + li {
						margin-top: .5rem;
					}
					&.jpg {
						background-image: url(../img/filetype-jpg.svg) ;
					}
					&.pdf {
						background-image: url(../img/filetype-pdf.svg) ;
					}
					&.uploader__error {
						color: #f00;
					}
					button {
						position: absolute;
						right: 1rem;
						top: 0;
						bottom: 0;
						margin-block: auto;
						width: 2rem;
						height: 2rem;
						background-color: var(--color-base);
						border-radius: 100%;
						&::before,
						&::after {
							content: "";
							position: absolute;
							top: calc(50% - 1px);
							right: 0.4rem;
							left: 0.4rem;
							border-top: 2px solid #fff;
							transform: rotate(45deg);
						}
						&::after {
							transform: rotate(-45deg);
						}
						@media screen and (max-width: 743px) {
							top: -0.5rem;
							right: -0.5rem;
							bottom: auto;
						}
					}
				}
			}
			&.-max .uploader__list {
				margin-bottom: 0;
				@media screen and (max-width: 743px) {
					padding-bottom: 2rem;
				}
			}
			&.-dragover {
				background-color: #e0effb;
				&::after {
					content: "";
					position: absolute;
					top: -1px;
					right: -1px;
					left: -1px;
					bottom: -1px;
					border: .3rem solid #66afe9;
				}
			}
		}
		.people_form {
			display: flex;
			align-items: center;
			gap: 10rem;
			@media screen and (max-width: 743px) {
				display: block;
			}
			dl {
				display: flex;
				align-items: center;
				gap: 2rem;
				dd {
					display: flex;
					gap: 1em;
					align-items: center;
				}
				@media screen and (max-width: 743px) {
					gap: 0;
					margin-bottom: 1rem;
					dt {
						width: 4em;
					}
				}
			}
			.confirm_text:empty {
				&::after {
					content: "0";
				}
			}
		}
	}

	.privacy_box {
		margin-top: 5rem;
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
		}
		& > dd {
			overflow-y: auto;
			height: 38rem;
			background-color: #fff;
			border: 1px solid var(--border);
			padding: 3em;
			font-size: 1.6rem;
			line-height: calc(26 / 16);
			@media screen and (max-width: 743px) {
				overflow-y: auto;
				height: 26rem;
				padding: 3em 1.5em;
				font-size: 1rem;
				line-height: 1.6;
			}
			.title {
				margin-bottom: 4rem;
				text-align: center;
				font-weight: var(--font-weight-bold);
				font-size: 1.8rem;
				@media screen and (max-width: 743px) {
					margin-bottom: 2rem;
					font-size: 1.2rem;
				}
			}
			dl {
				margin-bottom: 2rem;
			}
			dt {
				&::before {
					content: "●";
				}
			}
			ol li {
				position: relative;
				padding-left: 2em;
				& > span:first-child {
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
	}
	.privacy_check {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		white-space: nowrap;
	}

	.form_btn {
		position: relative;
		margin-top: 5rem;
		text-align: center;
		display: flex;
		justify-content: center;
		gap: 2rem;
		@media screen and (max-width: 743px) {
			gap: 1rem;
			margin-top: 3rem;
			.box_btn.-outline {
				font-size: 1.4rem;
			}
		}
	}
}
.-confirm .form_contents {
	.form_item {
		margin-bottom: 3rem;
		@media screen and (min-width: 744px), print {
			& > dt {
				height: auto;
				min-height: 0;
				padding: 0.5em 0;
				line-height: 2;
				br {
					display: none;
				}
			}
		}
		.hissu {
			display: none;
		}
		.confirm_text:not(.confirm_text .confirm_text) {
			display: block;
			min-height: 1lh;
			padding: 0.5em 1em;
			background-color: #f3f3f3;
			font-weight: var(--font-weight-bold);
			box-sizing: content-box;
		}
	}
}

@keyframes l3 {to{transform: rotate(1turn)}}
.form_contents {
	/* form item */
	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=number],
	input[type=date],
	input[type=url],
	textarea,
	select {
		width: 100%;
		height: 5rem;
		padding: 0 1em;
		background-color: #fff;
		border: 1px solid var(--border);
		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;
		}
		@media screen and (max-width: 743px) {
			font-size: 16px;
			height: 4rem;
		}
	}
	input[type=date] {
		width: auto;
	}
	textarea {
		height: 38rem;
		padding: 1.5em;
		@media screen and (max-width: 743px) {
			height: 26rem;
			padding: 1em;
		}
	}
	select {
		width: auto;
		padding: 0 3rem 0 1em;
		background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%226%22%20viewBox%3D%220%200%209%206%22%3E%3Cpath%20d%3D%22M8.995%2C.297L4.5%2C5.704%2C.005%2C.296H8.995Z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E');
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem);
	}
	button:disabled {
		opacity: 0.3;
	}
	button[aria-disabled="true"] {
		position: relative;
		pointer-events: none;
	}
	&:has(.uploader__list li) button[aria-disabled="true"] {
		color: rgba(255, 255, 255, .1);
		&::after {
			content: "";
			position: absolute;
			width: 3rem;
			padding: .5rem;
			aspect-ratio: 1;
			border-radius: 50%;
			background: #fff;
			--_m:
				conic-gradient(#0000 10%,#000),
				linear-gradient(#000 0 0) content-box;
			-webkit-mask: var(--_m);
					mask: var(--_m);
			-webkit-mask-composite: source-out;
					mask-composite: subtract;
			animation: l3 1s infinite linear;
		}
	}
	::placeholder {
		color: #9B9B9B;
	}

	input[type=checkbox],
	input[type=radio] {
		position: absolute;
		width: 2rem;
		height: 2rem;
	}
	label {
		position: relative;
		display: flex;
		align-items: center;
		height: 5rem;
		@media screen and (max-width: 743px) {
			height: auto;
			padding: 0.5rem 0;
		}
		:is(input[type=radio], input[type=checkbox]) {
			& + span {
				position: relative;
				padding-left: 3.4rem;
				@media screen and (max-width: 743px) {
					padding-left: 2.4rem;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -1.2rem;
					width: 2.4rem;
					height: 2.4rem;
					background-color: var(--bg-base);
					border: 1px solid var(--border);
					border-radius: .4rem;
					@media screen and (max-width: 743px) {
						width: 1.8rem;
						height: 1.8rem;
						margin-top: -.9rem;
					}
				}
				&::after {
					content: "";
					position: absolute;
					opacity: 0;
					transition: opacity .1s;
				}
			}
			&:checked + span::after {
				opacity: 1;
			}
		}
		input[type=radio] + span {
			padding-left: 2.4rem;
			margin-right: 1rem;
			@media screen and (max-width: 743px) {
				padding-left: 1.8rem;
			}
			&::before {
				border-radius: 100%;
			}
			&::after {
				left: 50%;
				top: 50%;
				width: 1.4rem;
				height: 1.4rem;
				transform: translate(-50%,-50%);
				background-color: var(--color-base);
				border-radius: 100%;
				@media screen and (max-width: 743px) {
					width: 1rem;
					height: 1rem;
				}
			}
		}
		input[type=checkbox] + span {
			padding-left: 4rem;
			@media screen and (max-width: 743px) {
				padding-left: 3rem;
			}
			&::before {
				width: 2.8rem;
				height: 2.8rem;
				margin-top: -1.4rem;
				border-width: 2px;
				border-radius: 0;
				@media screen and (max-width: 743px) {
					width: 2rem;
					height: 2rem;
					margin-top: -1rem;
				}
			}
			&::after {
				left: 1rem;
				top: calc(50% - 1rem);
				width: .9rem;
				height: 1.7rem;
				border-right: .3rem solid var(--color-base);
				border-bottom: .3rem solid var(--color-base);
				transform: rotate(45deg);
				@media screen and (max-width: 743px) {
					left: .7rem;
					top: calc(50% - .9rem);
					width: .7rem;
					height: 1.4rem;
				}
			}
		}
	}
}

.form_error {
	text-align: center;
	color: #f00;
	ul {
		margin-top: 2rem;
		font-weight: var(--font-weight-bold);
	}
	@media screen and (max-width: 743px) {
		text-align: left;
	}
}
.field_err {
	margin-top: 0.5rem;
	font-size: 1.6rem;
	line-height: 1.6;
	color: #f00;
	@media screen and (max-width: 743px) {
		font-size: 1.1rem;
	}
}

/* CONTACT */
#contactform:has(input[type="radio"][value="家づくりの相談がしたい"]:checked) .form_item.-aftermaintenance-only,
#contactform.家づくりの相談がしたい .form_item.-aftermaintenance-only {
	display: none !important;
}
#contactform:has(input[type="radio"][value="アフターメンテナンスについて"]:checked) .form_item.-consultation-only,
#contactform.アフターメンテナンスについて .form_item.-consultation-only {
	display: none !important;
}


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

	404

============================================================================= */
.page404 {
	text-align: center;
	.lead {
		margin-bottom: 2rem;
		font-size: 3rem;
		font-weight: var(--font-weight-bold);
		@media screen and (max-width: 743px) {
			font-size: 1.8rem;
		}
	}
	.back_btn {
		margin-top: 8rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
	}
}