@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: #333333;
	--color-white: #fff;
	--color-theme: #e68515;
	--color-grad1: #ea8d3d;
	--color-grad2: #f7be63;
	--color-blue: #549CD9;
	--color-lightblue: #eaeff5;
	--color-emerald: #cde7e4;
	--color-gold: #f5e5ab;
	--bg-base: #fafbfc;
	--border: #ccc;
	--gradient-orange: linear-gradient(90deg, var(--color-grad1) 0%, var(--color-grad2) 100%);
	--base-width: 120rem;
	--base-width-s: 90rem;
	--pc-min-window: 1400;
	--sp-base-padding: 1.5rem;
	--font-family-jp: 'Noto Sans JP', sans-serif;
	--font-family-en: '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-reg);
	--ls: 0;
	--white-filter: brightness(0) invert(1);
	--transition-duration: .3s;
	--transition: var(--transition-duration) ease-in-out;
	--header-height: 7.4rem;
	--header-top: 1.6rem;
	--target-margin: 3rem;
	--border-r: 1.6rem;
	@media screen and (max-width: 743px) {
		--header-height: 6rem;
		--header-top: 0rem;
		--target-margin: 2rem;
		--border-r: 1.2rem;
	}
}


/* ========================================================
	template.css => テンプレート用CSS
======================================================== */
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 / 375) * 100vw);
	}
}
html.no-scroll-behavior {
	scroll-behavior: auto;
}
body {
	padding-top: var(--header-top) !important;
	background-color: var(--bg-base);
	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;
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url(../img/body-bg.svg) no-repeat 50% 0;
		background-size: 200rem;
		z-index: -1;
	}
	@media screen and (max-width: 743px) {
		font-size: 1.4rem;
	}
}
* {
	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^="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.-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 {
	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-medium);
	font-style: normal;
}
._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 {
	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) + var(--header-top) + var(--target-margin));
}
:where([id]:not(style):not(script)) {
	scroll-margin-top: calc(var(--header-height) + var(--header-top) + 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) + var(--header-top));
}

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

/* header
====================================================================== */
#header {
	position: sticky;
	top: var(--header-top);
	height: var(--header-height);
	z-index: 900;
	.logo {
		a {
			display: flex;
			justify-content: center;
			align-items: center;
			height: var(--header-height);
			padding-left: 3.8rem;
			background: url(../img/logo-mark.png) no-repeat 0;
			background-size: 3.7rem;
			font-size: 1.8rem;
			font-weight: var(--font-weight-bold);
			color: var(--color-base);
			text-decoration: none;
		}
	}
	@media screen and (min-width: 744px), print {
		margin-inline: 4rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-inline: 2.4rem;
		background-color: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(8px);
		box-shadow: 0px .3rem .4rem rgba(0, 0, 0, 0.08);
		border: 1px solid #fff;
		border-radius: calc(var(--header-height) / 2);
		&:not(:has(.gnav .contact)) {
			padding-right: 10rem;
		}
		nav {
			.gnav {
				display: flex;
				li ul {
					display: none;
				}
				a {
					--ls: .05em;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 4.8rem;
					padding-inline: 1.4rem;
					padding-bottom: 0.05em;
					font-size: 1.5rem;
					font-weight: var(--font-weight-medium);
					color: var(--color-base);
					text-decoration: none;
					@media (hover) {
						&:hover {
							opacity: 0.5;
						}
					}
					&.contact {
						margin-left: 1.4rem;
						padding-inline: 2.4rem;
						background: var(--gradient-orange);
						color: #fff;
						font-weight: var(--font-weight-bold);
						border-radius: 10rem;
						@media (hover) {
							&:hover {
								opacity: 0.5;
							}
						}
					}
				}
			}
		}
	}
	@media print {
		position: absolute;
	}
	@media screen and (max-width: 743px) {
		.logo {
			display: flex;
			background-color: rgba(255, 255, 255, 0.8);
			box-shadow: 0px .2rem .4rem rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(8px);
			a {
				height: var(--header-height);
				padding-inline: calc(3rem + var(--sp-base-padding)) var(--sp-base-padding);
				background-position: var(--sp-base-padding);
				background-size: 2.96rem;
				font-size: 1.44rem;
			}
		}
		.nav_btn {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 1.5rem;
			width: 6.5rem;
			height: 4.5rem;
			margin-block: auto;
			background: var(--gradient-orange);
			border-radius: 0.5rem;
			z-index: 900;
			a {
				position: relative;
				display: block;
				overflow: hidden;
				height: 0;
				padding-top: 4.5rem;
				text-decoration: none;
				font-size: 1rem;
				&::before,
				&::after {
					content: "";
					position: absolute;
					width: 3.2rem;
					left: calc(50% - 1.6rem);
					top: calc(50% - .1rem);
					border-top: 2px solid #fff;
					pointer-events: none;
					transition: transform var(--transition), opacity var(--transition);
					z-index: 2;
				}
				&::before {
					transform: translateY(-.3rem);
				}
				&::after {
					transform: translateY(.3rem);
				}
			}
		}
		.-headeropen & .nav_btn {
			&::before {
				opacity: 0;
			}
			a::before {
				transform: translate(0) rotate(-30deg);
			}
			a::after {
				transform: translate(0) rotate(30deg);
			}
		}
		nav {
			position: fixed;
			top: var(--header-height);
			right: 0;
			left: 0;
			bottom: 0;
			padding-bottom: 4rem;
			background-color: rgba(255, 255, 255, 0.9);
			backdrop-filter: blur(8px);
			border-top: 1px solid color-mix(in srgb, var(--color-base) 20%, transparent);
			transition: transform var(--transition);
			transform: translateX(110%);
			overflow-y: auto;
			overscroll-behavior-y: contain;
			z-index: 899;
			.gnav {
				li + li {
					border-top: 1px solid color-mix(in srgb, var(--color-base) 20%, transparent);
				}
				a {
					position: relative;
					display: block;
					padding: 2rem 2rem;
					font-size: 1.6rem;
					line-height: 1;
					font-weight: var(--font-weight-bold);
					color: var(--color-base);
					text-decoration: none;
					&:not(.contact)::after {
						content: "";
						position: absolute;
						top: 50%;
						right: 2rem;
						width: 1rem;
						height: 1rem;
						border-top: 2px solid;
						border-right: 2px solid;
						transform-origin: 100% 0;
						transform: rotate(45deg);
					}
					&.contact {
						margin: 3rem auto 0;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 24.4rem;
						height: 6.4rem;
						text-align: center;
						background: var(--gradient-orange);
						color: #fff;
						font-size: 1.5rem;
						border-radius: 10rem;
						@media (hover) {
							&:hover {
								opacity: 0.5;
							}
						}
					}
				}
				li ul {
					border-top: 1px solid color-mix(in srgb, var(--color-base) 20%, transparent);
					a {
						padding: 1.5rem 4rem;
					}
				}

			}
		}
		.-headeropen & nav {
			transform: translateX(0);
		}
	}
}


/* footer
====================================================================== */
#footer {
	position: relative;
	padding: 8rem calc((100% - var(--base-width)) / 2) 4rem;
	background-color: #fff;
	z-index: 3;
	.logo {
		display: flex;
		a {
			display: flex;
			align-items: center;
			height: 4rem;
			padding-left: 4.8rem;
			background: url(../img/logo-mark.png) no-repeat 0;
			background-size: 4.8rem;
			font-size: 2rem;
			font-weight: var(--font-weight-bold);
			color: var(--color-base);
			text-decoration: none;
		}
	}
	.company-info {
		display: flex;
		gap: 1.5em;
		font-size: 1.4rem;
		margin-top: 0.5rem;
		line-height: 1.6;
	}

	.footer_contents {
		margin-top: 2.4rem;
		display: flex;
		justify-content: space-between;
		gap: 10rem;
	}
	.shops {
		display: flex;
		flex-direction: column;
		gap: 2.4rem;
		font-size: 1.4rem;
		line-height: 1.6;
		dt {
			margin-bottom: 0.5em;
			font-size: 1.8rem;
			font-weight: var(--font-weight-bold);
			line-height: 1.6;
		}
		.sns {
			margin-top: 1rem;
			justify-content: start;
			gap: 1rem;
		}
	}
	.nav {
		flex-shrink: 0;
		ul {
			column-count: 2;
			column-gap: 5.4rem;
			li {
				width: 24rem;
				margin-bottom: 2.4rem;
				break-inside: avoid;
				page-break-inside: avoid;
				-webkit-column-break-inside: avoid;
			}
		}
		a {
			position: relative;
			display: block;
			font-size: 1.6rem;
			line-height: 1.8;
			font-weight: var(--font-weight-medium);
			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: calc(50% - 1.2rem / 2);
				width: 1.6rem;
				height: 1.2rem;
				background: url(../img/ico-arrow.svg) no-repeat 50%;
				background-size: 100%;
			}
		}
	}
	.sns {
		display: flex;
		justify-content: end;
		gap: 1.6rem;
		margin-top: 2rem;
		a {
			display: block;
			width: 3rem;
		}
	}
	.group {
		display: flex;
		justify-content: center;
		gap: 4rem;
		margin-top: 4rem;
		a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 32.8rem;
			height: 7.2rem;
			background-color: #fff;
			border: 1px solid #333;
			border-radius: 0.4rem;
			img {
				width: auto;
				height: 4.8rem;
			}
			&.cosmokensetsu {
				background-color: #f1f1f1;
			}
		}
	}
	small {
		display: block;
		margin-top: 4rem;
		font-size: 1.2rem;
		line-height: 1.5;
		text-align: center;
		font-weight: var(--font-weight-reg);
	}
	@media screen and (max-width: 743px) {
		padding: 4rem var(--sp-base-padding) 12rem;
		.logo {
			a {
				font-size: 1.8rem;
			}
		}
		.company-info {
			font-size: 1.2rem;
		}
		.footer_contents {
			flex-direction: column;
			gap: 4rem;
		}
		.shops {
			font-size: 1.2rem;
			dt {
				font-size: 1.6rem;
			}
		}
		.nav {
			ul {
				column-gap: 2.4rem;
				li {
					width: auto;
					margin-bottom: 0;
				}
			}
			a {
				display: flex;
				align-items: center;
				height: 4.4rem;
				font-size: 1.3rem;
				line-height: 1.5;
			}
		}
		.sns {
			justify-content: center;
			margin-top: 4rem;
		}
		.group {
			flex-direction: column;
			align-items: center;
			gap: 1rem;
			margin-top: 3rem;
		}
		small {
			font-size: 1rem;
		}
	}

	.bg_shapes .shape_ele {
		&.-shape1 {
			width: 22rem;
			bottom: 23.4rem;
			right: calc(50% + 63.6rem);
			@media screen and (max-width: 743px) {
				width: 9.4rem;
				bottom: 21.4rem;
				right: 29.8rem;
			}
		}
		&.-shape2 {
			width: 30.4rem;
			bottom: -4.5rem;
			right: calc(50% + 28.4rem);
			@media screen and (max-width: 743px) {
				width: 12.4rem;
				bottom: -1.5rem;
				right: 24.5rem;
			}
		}
		&.-shape3 {
			width: 11.1rem;
			bottom: 27.5rem;
			right: calc(50% + 2.4rem);
			@media screen and (max-width: 743px) {
				width: 4.3rem;
				bottom: 12.8rem;
				right: 2rem;
			}
		}
		&.-shape4 {
			width: 19.6rem;
			bottom: 2.6rem;
			left: calc(50% + 24.4rem);
			@media screen and (max-width: 743px) {
				width: 5.9rem;
				bottom: .9rem;
				left: 20.5rem;
			}
		}
		&.-shape5 {
			width: 12.8rem;
			bottom: 35.2rem;
			left: calc(50% + 71.2rem);
			@media screen and (max-width: 743px) {
				width: 6.8rem;
				bottom: 29rem;
				left: 33.3rem;
			}
		}
	}
}

#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;
}

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

	パーツ

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

/* shape
====================================================================== */
:where(*:has(> .bg_shapes)) {
	position: relative;
}
.bg_shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: clip;
	z-index: -1;
}
.shape_ele {
	position: absolute;
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
	}
	&.-type1 { /* 円 */
		aspect-ratio: 1;
		&::before {
			border-radius: 100%;
		}
	}
	&.-type2 { /* 三角△ */
		aspect-ratio: 120 / 150;
		&::before {
			clip-path: polygon(50% 0, 100% 100%, 0 100%);
		}
	}
	&.-type3 { /* 三角⊿ */
		aspect-ratio: 200 / 162;
		&::before {
			clip-path: polygon(100% 0, 100% 100%, 0 100%);
		}
	}
	&.-type4 { /* 半円∩ */
		aspect-ratio: 200 / 162;
		&::before {
			border-radius: 100rem 100rem 0 0;
		}
	}
	&.-type5 { /* アーチ∩ */
		aspect-ratio: 200 / 145;
		&::before {
			--mask-svg: url(../img/shape-arch.svg);
			-webkit-mask-image: var(--mask-svg);
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
			-webkit-mask-size: contain;
			mask-image: var(--mask-svg);
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
		}
	}

	&.-g-yellow::before {
		background: linear-gradient(180deg, var(--color-gold) 0%, rgba(245, 229, 171, 0.5) 100%);
	}
	&.-g-red::before {
		background: linear-gradient(180deg, #f0dddd 0%, rgba(240, 221, 221, 0.5) 100%);
	}
	&.-g-blue::before {
		background: linear-gradient(180deg, var(--color-emerald) 0%, rgba(205, 231, 228, 0.5) 100%);
	}
	&.-g-green::before {
		background: linear-gradient(180deg, #cfd4be 0%, rgba(207, 212, 190, 0.5) 100%);
	}
	&.-g-sand::before {
		background: linear-gradient(180deg, #e8d283 0%, rgba(232, 210, 131, 0.5) 100%);
	}
	&.-g-beige::before {
		background: linear-gradient(180deg, #f0e9df 0%, rgba(240, 233, 223, 0.5) 100%);
	}

	&.-op80::before {
		opacity: 0.8;
	}

	&.-r90::before {
		transform: rotate(90deg);
	}
	&.-r180::before {
		transform: rotate(180deg);
	}
	&.-r270::before {
		transform: rotate(270deg);
	}
}

/* breadcrumbs
====================================================================== */
.breadcrumbs {
	margin: 2rem 8rem;
	font-size: 1.4rem;
	ol {
		display: flex;
		li {
			display: flex;
		}
		li + li::before {
			content: "＞";
			margin-inline: 1em;
		}
	}
	@media screen and (max-width: 743px) {
		overflow-x: auto;
		white-space: nowrap;
		margin: 0;
		font-size: 1.1rem;
		ol {
			padding: .6rem var(--sp-base-padding);
			padding-right: 0;
			li:last-child {
				padding-right: var(--sp-base-padding);
			}
		}
	}
}

/* page_title
====================================================================== */
.page_title {
	position: relative;
	max-width: var(--base-width);
	margin-inline: auto;
	h1 {
		position: relative;
		--ls: .02em;
		font-size: 5.6rem;
		line-height: 1.2;
	}
	.en {
		width: fit-content;
		margin-block: 2rem 1.5rem;
		font-size: 2rem;
		--ls: .04em;
		background: var(--gradient-orange);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	.kv {
		overflow: hidden;
		margin-top: 5.6rem;
		margin-bottom: 8rem;
		border-radius: 2rem;
		box-shadow: 0px .2rem .4rem rgba(0, 0, 0, 0.08);
	}
	@media screen and (min-width: 744px), print {
		min-height: 36.6rem;
		padding-top: 7rem;
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		padding-block: 4rem 3rem;
		h1 {
			font-size: 4rem;
			&.-sp-s {
				font-size: 3rem;
			}
		}
		.en {
			margin-block: 1.2rem .4rem;
			font-size: 1.7rem;
		}
		.kv {
			margin-top: 2.4rem;
			margin-bottom: 0;
			border-radius: 1.2rem;
			img {
				width: 100%;
				height: auto;
				aspect-ratio: 2 / 1;
				object-fit: cover;
			}
		}
	}
}

.single_page_title {
	position: relative;
	max-width: var(--base-width);
	margin-inline: auto;
	margin-block: 6rem;
	display: flex;
	align-items: center;
	gap: 0 2rem;
	.title {
		position: relative;
		--ls: .02em;
		font-size: 3.2rem;
		line-height: 1.2;
		font-weight: var(--font-weight-bold);
	}
	.en {
		width: fit-content;
		margin-block: 2rem 1.5rem;
		font-size: 2rem;
		--ls: .04em;
		background: var(--gradient-orange);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		flex-wrap: wrap;
		margin-inline: var(--sp-base-padding);
		margin-block: 3rem;
		h1 {
			font-size: 2.2rem;
		}
		.en {
			margin-block: 1.2rem .4rem;
			font-size: 1.3rem;
		}
	}
}

/* title
====================================================================== */
.en_title {
	--ls: .05em;
	margin-bottom: 6rem;
	font-size: 1.8rem;
	line-height: 1;
	font-weight: var(--font-weight-medium);
	.en {
		--ls: 0;
		margin-top: 3rem;
		font-size: 7.2rem;
		line-height: 1;
		font-weight: var(--font-weight-semi);
	}
	@media screen and (max-width: 743px) {
		margin-bottom: 3rem;
		font-size: 1.4rem;
		.en {
			margin-top: 1.5rem;
			font-size: 4.8rem;
		}
	}
}

.point_title {
	position: relative;
	padding-left: 5.2rem;
	margin-bottom: 6.4rem;
	font-size: 3.2rem;
	line-height: 1.5;
	font-weight: var(--font-weight-medium);
	&::before {
		content: "";
		position: absolute;
		top: calc(.5lh - 2.4rem / 2);
		left: 0;
		width: 3.4rem;
		height: 2.4rem;
		margin-inline: auto;
		background: url(../img/title-point.svg) no-repeat 50%;
		background-size: 100%;
	}
	&.-mbs {
		margin-bottom: 4rem;
	}
	@media screen and (max-width: 743px) {
		padding-left: 4.2rem;
		margin-bottom: 3rem;
		font-size: 2.2rem;
		&::before {
			width: 2.4rem;
		}
		&.-mbs {
			margin-bottom: 2rem;
		}
	}
}

.simple_lead_block {
	margin-bottom: 8rem;
	.lead {
		margin-bottom: 2.4rem;
		font-size: 3.2rem;
		line-height: 1.5;
		font-weight: var(--font-weight-medium);
	}
	@media screen and (min-width: 744px), print {
		margin-top: -7rem;
	}
	@media screen and (max-width: 743px) {
		margin-bottom: 4rem;
		.lead {
			margin-bottom: 2rem;
			font-size: 2.4rem;
		}
	}
}


/* contents_box
====================================================================== */
.contents_box {
	margin-bottom: 8rem;
	margin-inline: 4rem;
	padding: 8rem;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid #fff;
	border-radius: 4rem;
	box-shadow: 0px .2rem .4rem rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(4px);
	@media screen and (min-width: 744px), print {
		padding-inline: calc(((100% - 4rem * 2) - var(--base-width)) / 2 - 1px);
		&.-narrow {
			padding-inline: calc(((100% - 4rem * 2) - 104rem) / 2);
		}
	}
	@media screen and (max-width: 743px) {
		margin-bottom: 4rem;
		margin-inline: var(--sp-base-padding);
		border-radius: 2rem;
		padding: 4rem 2rem;
	}
}

/* category_list
====================================================================== */
.category_list {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	li:not(:has(a)),
	li a {
		position: relative;
		display: block;
		padding: 1rem 1.6rem;
		background: rgba(255,255,255,0.4);
		border: 1px solid #fff;
		border-radius: 10rem;
		font-size: 1.4rem;
		line-height: 1.6;
		text-decoration: none;
		box-shadow: 0px .2rem .4rem rgba(0,0,0,0.1);
		@media screen and (max-width: 743px) {
			font-size: 1.2rem;
		}
	}
	li a {
		z-index: 1;
		&::after {
			content: "";
			position: absolute;
			inset: -1px;
			border-radius: 10rem;
			background: var(--gradient-orange);
			opacity: 0;
			z-index: -1;
		}
		&.is-active {
			color: #fff;
			&::after {
				opacity: 1;
			}
		}
		@media (hover) {
			&:hover {
				color: #fff;
				&::after {
					opacity: 1;
				}
			}
		}
	}
}

/* box_btn
====================================================================== */
.box_btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	width: fit-content;
	height: 6.4rem;
	margin-inline: auto;
	padding-inline: 6rem;
	background: var(--gradient-orange);
	border-radius: 3.2rem;
	color: #fff;
	text-decoration: none;
	font-size: 1.6rem;
	line-height: 1.5;
	font-weight: var(--font-weight-bold);
	&::after {
		content: "";
		position: absolute;
		top: calc(50% - .6rem);
		right: 3rem;
		width: 1.8rem;
		height: 1.2rem;
		background: url(../img/ico-arrow-white.svg) no-repeat 50%;
		background-size: 100%;
		z-index: 2;
	}
	@media (hover) {
		transition: opacity var(--transition);
		&:hover,
		a:hover & {
			opacity: 0.7;
		}
	}
	@media screen and (max-width: 743px) {
		font-size: 1.4rem;
	}
}

/* more_link
====================================================================== */
.more_link {
	margin-top: 6rem;
	&.-mb {
		margin-bottom: 10rem;
	}
	@media screen and (max-width: 743px) {
		margin-top: 3rem;
		&.-mb {
			margin-bottom: 5rem;
		}
	}
}

/* arrow_link
====================================================================== */
.arrow_link {
	--ls: .05em;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	font-size: 1.6rem;
	font-weight: var(--font-weight-bold);
	.arrow {
		position: relative;
		width: 6.4rem;
		aspect-ratio: 1;
		border-radius: 100%;
		background: var(--gradient-orange);
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: url(../img/ico-arrow-white.svg) no-repeat 50%;
			background-size: 1.6rem;
			z-index: 2;
		}
	}
	&.-right {
		justify-content: end;
	}
	@media (hover) {
		transition: color var(--transition);
		&:hover,
		a:hover & {
			color: var(--color-theme);
		}
	}
	@media screen and (max-width: 743px) {
		font-size: 1.4rem;
	}
}


/* large_card_link
====================================================================== */
.large_card_link_block {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.large_card_link {
	display: block;
	padding: 4rem;
	background: rgba(255,255,255,0.7);
	border-radius: 2rem;
	box-shadow: 0 .8rem 1.6rem rgba(0,0,0,0.05);
	text-decoration: none;
	.img {
		overflow: hidden;
		border-radius: var(--border-r);
	}
	.title {
		--ls: .02em;
		margin-bottom: 2rem;
		font-size: 2.8rem;
		line-height: 1.5;
	}
	.more {
		justify-content: end;
	}
	@media screen and (min-width: 744px), print {
		display: flex;
		gap: 4rem;
		.img {
			width: 32rem;
			flex-shrink: 0;
		}
		.contents {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			padding-block: 1rem 1.5rem;
		}
		.more {
			margin-top: auto;
		}
	}
	@media screen and (max-width: 743px) {
		padding: 2rem;
		border-radius: 1.2rem;
		.img {
			margin-bottom: 2rem;
			aspect-ratio: 4 / 2.6;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.title {
			margin-bottom: 1.5rem;
			font-size: 2.2rem;
		}
		.more {
			margin-top: 2rem;
		}
	}
}


/* local_nav
====================================================================== */
.local_nav {
	margin-bottom: 8rem;
	display: flex;
	justify-content: center;
	ul {
		display: flex;
		justify-content: center;
		padding-inline: 3.2rem;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 10rem;
		box-shadow: 0 .2rem .4rem rgba(0, 0, 0, 0.08);
		backdrop-filter: blur(4px);
		a {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 7.1rem;
			padding: 0 3.2rem 1rem;
			text-decoration: none;
			font-weight: var(--font-weight-medium);
			line-height: 1.3;
			text-align: center;
			&::before {
				content: "";
				position: absolute;
				right: 0;
				left: 0;
				bottom: 1.2rem;
				width: 1.2rem;
				height: 1.3rem;
				margin-inline: auto;
				background: url(../img/ico-arrow-down.svg) no-repeat 50%;
				background-size: 100%;
			}
			@media (hover) {
				&:hover {
					color: var(--color-theme);
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		margin-bottom: 5rem;
		ul {
			width: 100%;
			padding-inline: 1rem;
			li {
				flex-grow: 1;
			}
			a {
				padding: 0 0 1rem;
			}
		}
	}
}

/* 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;
				}
			}
		}
	}
}

/* faq_block
====================================================================== */
.faq_block {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	max-width: 90rem;
	margin-inline: auto;
	.faq {
		.q {
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: center;
			min-height: 7.2rem;
			padding: 1.5rem 7rem 1.5rem 9rem;
			background-color: var(--color-lightblue);
			font-size: 1.8rem;
			line-height: 1.6;
			font-weight: var(--font-weight-bold);
			border-radius: 0.8rem;
			cursor: pointer;
			.en {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				width: 6.4rem;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--color-blue);
				color: #fff;
				font-size: 2.4rem;
				font-weight: var(--font-weight-bold);
			}
			&::before,
			&::after {
				content: "";
				position: absolute;
				right: 3rem;
				top: calc(50% - 1px);
				width: 1.4rem;
				border-top: 2px solid var(--color-blue);
			}
			&::after {
				transform: rotate(90deg);
			}
		}
		.a_inner {
			position: relative;
			padding: 2rem 3rem 0 7rem;
			&::before {
				content: "A.";
				position: absolute;
				left: 2.4rem;
				top: 2rem;
				font-size: 2.4rem;
				line-height: 1;
				font-family: var(--font-family-en);
				font-weight: var(--font-weight-bold);
				color: var(--color-blue);
			}
		}
	}
	@media screen and (max-width: 743px) {
		gap: 1.6rem;
		.faq {
			.q {
				min-height: 6rem;
				padding: 1rem 3rem 1rem 5rem;
				background-color: var(--color-lightblue);
				font-size: 1.5rem;
				.en {
					width: 3.6rem;
					font-size: 2rem;
				}
				&::before,
				&::after {
					right: 1.4rem;
				}
			}
			.a_inner {
				padding: 1.5rem 0 0 4rem;
				&::before {
					left: 1rem;
					top: 1.5rem;
					font-size: 2rem;
				}
			}
		}
	}
}

/* has_zoom
====================================================================== */
.has_zoom {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--border-r);
	overflow: hidden;
	&::after {
		content: "";
		position: absolute;
		right: 1rem;
		bottom: 1rem;
		width: 3.4rem;
		aspect-ratio: 1;
		border-radius: 0.4rem;
		background-color: rgba(0,0,0,0.7);
		background-image: url(../img/ico-zoom.svg);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	@media (hover) {
		&::after {
			transition: background var(--transition);
		}
		a:hover &::after {
			background-color: rgba(0,0,0,1);
		}
	}
	@media screen and (max-width: 743px) {
		&::after {
			right: .6rem;
			bottom: .6rem;
			width: 3rem;
		}
	}
}

/* glightbox
====================================================================== */
.goverlay {
	background: rgba(0,0,0,0.7) !important;
}

/* gallery_block
====================================================================== */
.gallery_block {
	display: grid;
	@media screen and (min-width: 744px), print {
		grid-template-columns: repeat(4, 1fr);
		gap: 3.2rem;
	}
	@media screen and (max-width: 743px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

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

/* works_list
====================================================================== */
.works_list {
	display: grid;
	margin-block: 8rem;
	&:first-child {
		margin-top: 0;
	}
	a {
		display: block;
		text-decoration: none;
		.ph {
			position: relative;
			overflow: hidden;
			margin-bottom: 1.6rem;
			border-radius: 1.2rem;
			aspect-ratio: 4 / 3;
			&:empty {
				background-color: #ddd;
			}
		}
		.category_list {
			margin-block: 1.2rem;
			&:last-child {
				margin-bottom: 0;
			}
		}
		.title {
			font-weight: var(--font-weight-medium);
		}
		.title_l {
			margin-bottom: 1.6rem;
			font-size: 2.4rem;
			line-height: 1.6;
			font-weight: var(--font-weight-medium);
		}
		.summary {
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
		}
		.more {
			margin-top: 2.4rem;
		}
	}
	@media screen and (min-width: 744px), print {
		grid-template-columns: repeat(4, 1fr);
		gap: 4rem 3.2rem;
		&.-col3 {
			grid-template-columns: repeat(3, 1fr);
			gap: 8rem 4rem;
			.ph {
				margin-bottom: 3rem;
				border-radius: var(--border-r);
			}
		}
	}
	@media screen and (max-width: 743px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 4rem 1.5rem;
		margin-block: 4rem;
		&.-sp_col1 {
			grid-template-columns: repeat(1, 1fr);
		}
		a {
			.title_l {
				margin-bottom: 1.2rem;
				font-size: 1.8rem;
			}
			.more {
				margin-top: 1.6rem;
			}
			.arrow_link {
				.arrow {
					width: 4rem;
				}
			}
		}
	}
}
.contents_box .works_list:last-child {
	margin-bottom: 0;
}

/* ph_text_block
====================================================================== */
.ph_text_block {
	.ph {
		position: relative;
		img {
			border-radius: var(--border-r);
		}
		&.-bg {
			background-color: var(--bg-base);
			border-radius: var(--border-r);
		}
		&.-border::before {
			content: "";
			position: absolute;
			inset: 0;
			border: 1px solid #eee;
			border-radius: var(--border-r);
		}
	}
	@media screen and (min-width: 744px), print {
		display: flex;
		gap: 6.4rem;
		&.-ph-r {
			flex-direction: row-reverse;
		}
		.ph {
			width: 56rem;
			flex-shrink: 0;
		}
		.text {
			flex-grow: 1;
		}
	}
	@media screen and (max-width: 743px) {
		.ph {
			margin-bottom: 3rem;
		}
	}
}

/* lead_block
====================================================================== */
.lead_block {
	.lead {
		margin-bottom: 4rem;
		font-size: 4rem;
		line-height: 1.5;
	}
	@media screen and (max-width: 743px) {
		.lead {
			margin-bottom: 2rem;
			font-size: 2.4rem;
		}
	}
}

/* ph_left_block
====================================================================== */
.ph_left_block {
	display: flex;
	flex-direction: column;
	gap: 4.8rem;
	.item {
		.ph {
			img {
				border-radius: 1.2rem;
			}
		}
		.title {
			margin-bottom: 1.2rem;
			font-size: 2.4rem;
			line-height: 1.8;
			font-weight: var(--font-weight-medium);
		}
	}
	@media screen and (min-width: 744px), print {
		.item {
			display: grid;
			grid-template-columns: 24rem 1fr;
			gap: 6.4rem;
			margin-right: -4rem;
		}
	}
	@media screen and (max-width: 743px) {
		.item {
			.ph {
				/* width: 24rem; */
				margin-bottom: 1.5rem;
				margin-inline: auto;
				img {
					border-radius: .9rem;
				}
			}
			.title {
				font-size: 2rem;
			}
		}
	}
}

/* wp-pagenavi
====================================================================== */
.wp-pagenavi {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-block: 8rem;
	& > * {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 4.8rem;
		height: 4.8rem;
		background-color: #fff;
		font-size: 1.4rem;
		text-decoration: none;
		border-radius: 100%;
		box-shadow: 0 .2rem .4rem rgba(0, 0, 0, 0.1);
	}
	.current {
		background-color: var(--color-blue);
		color: #fff;
	}
	@media (hover) {
		a:hover {
			background-color: var(--color-blue);
			color: #fff;
		}
	}
	@media screen and (max-width: 743px) {
		gap: 1rem;
		margin-block: 4rem;
		& > * {
			width: 4rem;
			height: 4rem;
		}
	}
}



/* 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;
}


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

	当社の強み

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

/* house_list
====================================================================== */
.house_list {
	.item {
		--ptop: 9rem;
		padding: 12rem 4.8rem 4.8rem;
		clip-path: polygon(0 var(--ptop), 50% 0, 100% var(--ptop), 100% 100%, 0 100%);
		&:nth-child(1) {
			background-color: var(--color-emerald);
		}
		&:nth-child(2) {
			background-color: var(--color-gold);
		}
		&:nth-child(3) {
			background-color: #f0e9df;
		}
		.num {
			margin-bottom: 4rem;
			font-size: 4rem;
			line-height: 1;
			color: #fff;
			text-align: center;
			font-weight: var(--font-weight-reg);
		}
		.title {
			--ls: .05em;
			margin-bottom: 4rem;
			text-align: center;
			font-size: 2.8rem;
			line-height: 1.2;
			font-weight: var(--font-weight-bold);
		}
	}
	@media screen and (min-width: 744px), print {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4rem;
	}
	@media screen and (max-width: 743px) {
		.item {
			--ptop: 6.8rem;
			padding: 7rem 3rem 4rem;
			&:not(:first-child) {
				margin-top: -2rem;
			}
			.num {
				margin-bottom: 2rem;
				font-size: 3rem;
			}
			.title {
				margin-bottom: 2rem;
				font-size: 2.2rem;
			}
		}
	}
}

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

	サービス内容

============================================================================= */
.service_flow {
	.lead {
		text-align: center;
		margin-bottom: 4rem;
	}
	.flow {
		display: flex;
		flex-wrap: wrap;
		gap: 4rem 4rem;
		li {
			position: relative;
			display: block;
			background-color: var(--color-lightblue);
			border-radius: 1.2rem;
			text-align: center;
			font-size: 2rem;
			line-height: 1.6;
			font-weight: var(--font-weight-medium);
			.num {
				display: block;
				margin-bottom: 2.4rem;
				font-size: 2.4rem;
				line-height: 1;
				color: var(--color-blue);
				font-weight: var(--font-weight-reg);
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.flow {
			overflow: hidden;
			li {
				height: 20rem;
				padding-top: 4.4rem;
				width: calc((100% - (4rem * 4)) / 5);
				&:nth-child(n + 6) {
					width: calc((100% - (4rem * 3)) / 4);
				}
				&:not(:last-child)::after {
					content: "";
					position: absolute;
					right: calc(-4rem / 2 - 1.8rem / 2 - .2rem);
					top: calc(50% - 5rem / 2);
					width: 1.8rem;
					height: 5rem;
					background-color: var(--color-blue);
					clip-path: polygon(0 0, 100% 50%, 0 100%);
				}
				&.-multi {
					line-height: 1.4;
					.num {
						margin-bottom: 2rem;
					}
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		.lead {
			margin-bottom: 2rem;
		}
		.flow {
			flex-direction: column;
			gap: 3rem;
			li {
				padding: 2rem;
				font-size: 1.6rem;
				.num {
					margin-bottom: 1rem;
					font-size: 2rem;
				}
				&:not(:last-child)::after {
					content: "";
					position: absolute;
					left: 0;
					right: 0;
					bottom: -2.4rem;
					margin-inline: auto;
					width: 4rem;
					height: 1.5rem;
					background-color: var(--color-blue);
					clip-path: polygon(0 0, 100% 0, 50% 100%);
				}
			}
		}
	}
}

/* 下層 */
.service_main {
	overflow: hidden;
	max-width: var(--base-width);
	margin-inline: auto;
	margin-bottom: 8rem;
	border-radius: 2rem;
	box-shadow: 0px .2rem .4rem rgba(0,0,0,0.08);
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		margin-bottom: 4rem;
		border-radius: 1.2rem;
		aspect-ratio: 2 / 1;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}
.construction_list {
	display: flex;
	flex-wrap: wrap;
	gap: 4rem;
	dt {
		margin-bottom: 1.4rem;
		font-size: 2.2rem;
		line-height: 1.6;
		font-weight: var(--font-weight-medium);
		.ico {
			display: flex;
			justify-content: center;
			align-items: center;
			aspect-ratio: 4 / 3;
			margin-bottom: 2.4rem;
			border-radius: var(--border-r);
			img {
				width: calc(180 / 270 * 100%);
			}
		}
	}
	&.-house .ico {
		background-color: var(--color-emerald);
	}
	&.-apartment .ico {
		background-color: var(--color-gold);
	}
	@media screen and (min-width: 744px), print {
		dl {
			width: calc((100% - (4rem * 3)) / 4);
		}
	}
	@media screen and (max-width: 743px) {
		gap: 2.4rem 1.5rem;
		font-size: 1.2rem;
		dt {
			margin-bottom: 1rem;
			font-size: 1.6rem;
			.ico {
				margin-bottom: 1.2rem;
			}
		}
		dl {
			width: calc((100% - (1.5rem * 1)) / 2);
		}
	}
}

.trouble_list {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	.trouble {
		.ico {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #becfdf;
			aspect-ratio: 4 / 3;
			border-radius: var(--border-r);
			img {
				width: calc(160 / 270 * 100%);
			}
		}
		dt {
			margin-bottom: 1.4rem;
			font-size: 2.4rem;
			line-height: 1.6;
			font-weight: var(--font-weight-medium);
		}
	}
	@media screen and (min-width: 744px), print {
		.trouble {
			display: flex;
			align-items: start;
			gap: 4rem;
			.ico {
				flex-shrink: 0;
				width: 27rem;
			}
			dl {
				padding-top: 2rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		.trouble {
			dt {
				margin-top: 2rem;
				margin-bottom: 1rem;
				font-size: 1.8rem;
			}
		}
	}
}


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

	会社案内

============================================================================= */
.message_block {
	.ph {
		img {
			border-radius: var(--border-r);
		}
		.name {
			display: block;
			margin-top: 3rem;
			.-l {
				margin-left: 0.5em;
				font-size: 2.4rem;
				line-height: 1.2;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		display: flex;
		flex-direction: row-reverse;
		gap: 6.4rem;
		.ph {
			width: 32rem;
			flex-shrink: 0;
		}
		.message {
			flex-grow: 1;
		}
	}
	@media screen and (max-width: 743px) {
		.ph {
			width: 24rem;
			margin-bottom: 3rem;
			margin-inline: auto;
			text-align: center;
			.name {
				margin-top: 1.5rem;
				.-l {
					font-size: 2rem;
				}
			}
		}
	}
}

.access_block {
	display: flex;
	flex-direction: column;
	gap: 4.8rem;
	.item {
		.ph {
			img {
				border-radius: 1.2rem;
			}
		}
		.title {
			margin-bottom: 1.2rem;
			font-size: 2.4rem;
			line-height: 1.8;
			font-weight: var(--font-weight-medium);
		}
	}
	@media screen and (min-width: 744px), print {
		.item {
			display: grid;
			grid-template-columns: 24rem 1fr;
			gap: 6.4rem;
			margin-right: -4rem;
		}
	}
	@media screen and (max-width: 743px) {
		.item {
			.ph {
				/* width: 24rem; */
				margin-bottom: 1.5rem;
				margin-inline: auto;
				img {
					border-radius: .9rem;
				}
			}
			.title {
				font-size: 2rem;
			}
		}
	}
}

.staff_list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4rem 5rem;
	span {
		display: block;
	}
	.ph {
		overflow: hidden;
		position: relative;
		margin-bottom: 1.6rem;
		aspect-ratio: 400 / 480;
		border-radius: 1.2rem;
		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
		&.-no-ph {
			background-color: #ebebeb;
			&::after {
				content: "準備中";
				position: absolute;
				inset: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: var(--font-weight-medium);
				color: #aaa;
				letter-spacing: 0.3em;
				padding-left: 0.3em;
			}
		}
	}
	.position {
		font-size: 1.4rem;
	}
	.name {
		font-size: 2rem;
		font-weight: var(--font-weight-medium);
	}
	.en {
		font-size: 1.4rem;
		font-weight: var(--font-weight-bold);
		color: var(--color-grad1);
		text-transform: capitalize;
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem 2rem;
		.position {
			font-size: 1.1rem;
		}
		.name {
			font-size: 1.8rem;
		}
		.en {
			font-size: 1.2rem;
		}
	}
}


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

	採用情報

============================================================================= */
.recruit_lead {
	text-align: center;
	margin-bottom: 4rem;
	@media screen and (max-width: 743px) {
		margin-bottom: 2rem;
	}
}

.flow_block {
	display: flex;
	gap: 6.4rem;
	.item {
		position: relative;
		width: 100%;
		padding: 4.8rem;
		background-color: var(--color-lightblue);
		border-radius: var(--border-r);
		.num {
			margin-bottom: 3.5rem;
			font-size: 4rem;
			line-height: 1;
			text-align: center;
			color: var(--color-blue);
			font-weight: var(--font-weight-reg);
		}
		.title {
			--ls: .05em;
			margin-bottom: 3.5rem;
			text-align: center;
			font-size: 2.8rem;
			line-height: 1.3;
		}
		&:not(:last-child)::after {
			content: "";
			position: absolute;
			background-color: var(--color-blue);
		}
	}
	@media screen and (min-width: 744px), print {
		.item:not(:last-child)::after {
			top: calc(50% - 7rem / 2);
			right: -4.6rem;
			width: 2.4rem;
			height: 7rem;
			clip-path: polygon(0 0, 100% 50%, 0 100%);
		}
	}
	@media screen and (max-width: 743px) {
		flex-direction: column;
		gap: 4rem;
		.item {
			padding: 3rem;
			.num {
				margin-bottom: 2rem;
				font-size: 3rem;
			}
			.title {
				margin-bottom: 2rem;
				font-size: 2.2rem;
			}
			&:not(:last-child)::after {
				content: "";
				position: absolute;
				background-color: var(--color-blue);
			}
			&:not(:last-child)::after {
				bottom: -3rem;
				right: calc(50% - 5rem / 2);
				width: 5rem;
				height: 1.8rem;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
			}
		}
	}
}


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

	リフォーム事例

============================================================================= */
.narrow_list {
	margin-bottom: 2.4rem;
	padding: 2.4rem 4rem;
	background: var(--color-lightblue);
	border: 1px solid #fff;
	border-radius: 1.2rem;
	dt {
		margin-bottom: 1.6rem;
		font-weight: var(--font-weight-bold);
		line-height: 1.5;
	}
	.category_list {
		li a {
			background-color: #fff;
			font-weight: var(--font-weight-medium);
			&::after {
				content: none;
			}
			@media screen and (min-width: 744px), print {
				padding: 1.2rem 2rem;
				font-size: 1.5rem;
			}
			@media screen and (max-width: 743px) {
			}
			&.is-active {
				background-color: var(--color-blue);
				border-color: var(--color-blue);
				color: #fff;
			}
			@media (hover) {
				&:hover {
					background-color: var(--color-blue);
					border-color: var(--color-blue);
					color: #fff;
				}
			}
		}
	}
	.case_list {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem 4rem;
		font-weight: var(--font-weight-medium);
		a.is-active {
			text-decoration: none;
			font-weight: var(--font-weight-bold);
		}
	}
	@media screen and (max-width: 743px) {
		margin-bottom: 1.8rem;
		padding: 1.6rem 2rem;
		dt {
			margin-bottom: 1.2rem;
		}
		.case_list {
			gap: .6rem 2rem;
		}
	}
}

.works_detail_contents {
	.works_detail_header {
		margin-bottom: 6.4rem;
		padding-bottom: 2.4rem;
		border-bottom: 1px solid var(--border);
		font-weight: var(--font-weight-medium);
		h1 {
			--ls: .04em;
			margin-bottom: 1.6rem;
			font-size: 3.6rem;
			line-height: 1.6;
			font-weight: var(--font-weight-medium);
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 4rem;
			padding-bottom: 2rem;
			h1 {
				font-size: 2.4rem;
			}
		}
	}
	& > section + section {
		margin-top: 8rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
	}

	.requests-suggestion {
		.requests {
			padding: 2.4rem;
			background-color: var(--color-lightblue);
			border-radius: 1.2rem;
			h3 {
				margin-bottom: 1.6rem;
				font-size: 1.8rem;
				line-height: 1.6;
				font-weight: var(--font-weight-medium);
			}
			ul {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				li {
					padding: 1.6rem;
					background-color: #fff;
					border-radius: 0.6rem;
					font-size: 1.6rem;
					line-height: 1.2;
				}
			}
		}
		.suggestion {
			h3 {
				margin-bottom: 1.6rem;
				font-size: 2.4rem;
				line-height: 1.6;
				font-weight: var(--font-weight-medium);
			}
			ul {
				line-height: 2;
				font-weight: var(--font-weight-medium);
			}
		}
		@media screen and (min-width: 744px), print {
			display: grid;
			grid-template-columns: 32.4rem 1fr;
			gap: 6rem;
		}
		@media screen and (max-width: 743px) {
			.requests {
				h3 {
					font-size: 1.6rem;
				}
				ul {
					li {
						font-size: 1.4rem;
					}
				}
			}
			.suggestion {
				margin-top: 3rem;
				h3 {
					font-size: 1.8rem;
				}
			}
		}
	}

	.before-after {
		section {
			position: relative;
		}
		h3 {
			--ls: .04em;
			width: fit-content;
			margin-bottom: 3.2rem;
			font-weight: var(--font-weight-bold);
			font-size: 3.2rem;
			line-height: 1;
			background: var(--gradient-orange);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
		.ph {
			margin-bottom: 3.2rem;
			img {
				border-radius: var(--border-r);
			}
		}
		@media screen and (min-width: 744px), print {
			display: grid;
			grid-template-columns: 40rem 1fr;
			gap: 16rem;
			.before::after {
				content: "";
				position: absolute;
				top: 50%;
				right: -10rem;
				width: 5rem;
				height: 5rem;
				border-top: .4rem solid var(--color-blue);
				border-right: .4rem solid var(--color-blue);
				transform-origin: 100% 0;
				transform: rotate(45deg);

			}
		}
		@media screen and (max-width: 743px) {
			h3 {
				margin-bottom: 2.4rem;
				font-size: 2.4rem;
			}
			.ph {
				margin-bottom: 2.4rem;
			}
			.before {
				.ph {
					width: 80%;
				}
				&::after {
					content: "";
					position: absolute;
					right: 50%;
					bottom: -4.4rem;
					width: 3rem;
					height: 3rem;
					border-bottom: .3rem solid var(--color-blue);
					border-right: .3rem solid var(--color-blue);
					transform-origin: 100% 100%;
					transform: rotate(45deg);

				}
			}
			.after {
				margin-top: 5rem;
			}
		}
	}

	.board {
		display: grid;
		a {
			display: block;
			text-decoration: none;
			.img {
				position: relative;
				overflow: hidden;
				display: block;
				border-radius: 1.2rem;
				aspect-ratio: 4 / 3;
				box-shadow: 0px .2rem .4rem rgba(0, 0, 0, 0.1);
			}
			.caption {
				display: block;
				margin-top: 1.6rem;
			}
		}
		@media screen and (min-width: 744px), print {
			grid-template-columns: repeat(4, 1fr);
			gap: 4rem 3.2rem;
		}
		@media screen and (max-width: 743px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 4rem 1.5rem;
			a {
				.caption {
					margin-top: 1rem;
					font-size: 1.3rem;
				}
			}
		}
	}
}

.recommended_works {
	margin-top: 8rem;
	.point_title {
		margin-bottom: 4rem;
	}
	.works_list {
		margin-top: 0;
	}
	@media screen and (max-width: 743px) {
		margin-top: 4rem;
		.point_title {
			margin-bottom: 2rem;
		}
	}
}



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

	不動産情報

============================================================================= */
.real-estate_list {
	display: grid;
	margin-block: 4rem 16rem;
	&:first-child {
		margin-top: 0;
	}
	a {
		display: block;
		text-decoration: none;
		.ph {
			position: relative;
			overflow: hidden;
			margin-bottom: 1.6rem;
			border-radius: 1.2rem;
			aspect-ratio: 4 / 3;
			&:empty {
				background-color: #ddd;
			}
		}
		.title {
			font-weight: var(--font-weight-medium);
		}
		p {
			margin-top: 0.8rem;
			font-size: 1.4rem;
			line-height: 1.6;
		}
		.price {
			border-top: 1px solid var(--border);
			margin-top: 1.6rem;
			padding-top: 1.6rem;
			dt {
				font-size: 1.4rem;
				font-weight: var(--font-weight-medium);
				line-height: 1.6;
			}
			dd {
				margin-top: 0.8rem;
				strong {
					font-size: 2.1rem;
					line-height: 1.5;
				}
			}
		}
		.showroom_open {
			width: fit-content;
			padding: .2rem 1.6rem .4rem;
			background-color: var(--color-gold);
			border-radius: 100rem;
			font-size: 1.2rem;
			font-weight: var(--font-weight-medium);
		}
		&.-new .ph::after {
			content: "";
			position: absolute;
			right: .2rem;
			bottom: .2rem;
			width: 6rem;
			height: 6rem;
			background: url(../img/ico-new.svg) no-repeat 50%;
			background-size: 100%;
			z-index: 3;
		}
	}
	@media screen and (min-width: 744px), print {
		grid-template-columns: repeat(4, 1fr);
		gap: 5rem 3.2rem;
	}
	@media screen and (max-width: 743px) {
		grid-template-columns: repeat(1, 1fr);
		gap: 4rem 0;
		margin-block: 2rem 8rem;
		a {
			p {
				font-size: 1.2rem;
			}
			.price {
				margin-top: 1.2rem;
				padding-top: 1.2rem;
				dt {
					font-size: 1.2rem;
				}
				dd {
					margin-top: 0.4rem;
					strong {
						font-size: 2.1rem;
					}
				}
			}
			.showroom_open {
				font-size: 1.1rem;
			}
		}
	}
}
.real-estate_detail_contents {
	.real-estate_detail_header {
		margin-bottom: 8rem;
		h1 {
			--ls: .04em;
			font-size: 3.6rem;
			line-height: 1.6;
			font-weight: var(--font-weight-medium);
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 4rem;
			h1 {
				font-size: 2.4rem;
			}
		}
	}
	.real-estate_detail_main {
		margin-bottom: 14rem;
		.ph img {
			border-radius: var(--border-r);
		}
		dl {
			margin-bottom: 1.6rem;
		}
		dt {
			font-weight: var(--font-weight-medium);
			font-size: 1.7rem;
		}
		.showroom_open {
			width: fit-content;
			margin-top: 1.6rem;
			padding: .2rem 1.6rem .4rem;
			background-color: var(--color-gold);
			border-radius: 100rem;
			font-size: 1.2rem;
			font-weight: var(--font-weight-medium);
		}
		.price_block {
			margin-top: 1.6rem;
			dt {
				font-size: 100%;
			}
			.old {
				display: flex;
				align-items: end;
				flex-wrap: wrap;
				font-size: 1.3rem;
				dt::after {
					content: "：";
				}
				dd {
					display: flex;
					align-items: end;
					text-decoration: line-through;
				}
				strong {
					font-size: 2rem;
					line-height: 1.4;
					padding-right: .3em;
				}
			}
			.price {
				margin-top: .5rem;
				font-size: 1.7rem;
				line-height: 1.5;
				strong {
					font-size: 3rem;
					line-height: 1.2;
					color: var(--color-theme);
				}
			}
			.price-date {
				margin-top: 1.6rem;
				font-size: 1.2rem;
			}
		}
		.property-tags {
			margin-top: 2.4rem;
			display: flex;
			flex-wrap: wrap;
			gap: .8rem;
			li {
				padding: 1rem;
				font-size: 1.4rem;
				line-height: 1.6;
				box-shadow: 0 .1rem .4rem rgba(0,0,0,0.1);
				border-radius: .4rem;
			}
		}
		.contact {
			margin-top: 3rem;
			dd > * {
				margin-top: 1em;
			}
		}
		@media screen and (min-width: 744px), print {
			display: grid;
			grid-template-columns: 64rem 1fr;
			gap: 6rem;
			.price_block {
				.price-date {
					display: flex;
					li:not(:last-child)::after {
						content: "、";
					}
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 6rem;
			.ph {
				margin-bottom: 2rem;
			}
			dt {
				font-size: 1.5rem;
			}
			.showroom_open {
				margin-top: 1.2rem;
			}
			.price_block {
				.old {
					font-size: 1.2rem;
					strong {
						font-size: 1.8rem;
					}
				}
				.price {
					font-size: 1.5rem;
					strong {
						font-size: 2.6rem;
					}
				}
				.price-date {
					margin-top: 1.2rem;
					font-size: 1.1rem;
				}
			}
			.property-tags {
				margin-top: 1.6rem;
				gap: .8rem;
				li {
					padding: .6rem 1rem;
					font-size: 1.2rem;
				}
			}
		}
	}
	.information {
		padding-block: 8rem 9rem;
		border-top: 1px solid var(--border);
		header {
			.en {
				font-size: 6.4rem;
				line-height: 1;
			}
			h2 {
				margin-top: 1rem;
				font-size: 2rem;
				font-weight: var(--font-weight-medium);
			}
		}
		@media screen and (min-width: 744px), print {
			display: grid;
			grid-template-columns: 42rem 1fr;
		}
		@media screen and (max-width: 743px) {
			padding-block: 4rem 5rem;
			header {
				margin-bottom: 3rem;
				.en {
					font-size: 4rem;
				}
				h2 {
					margin-top: .6rem;
					font-size: 1.6rem;
				}
			}
		}
	}
	.gallery {
		padding-block: 4rem 8rem;
		border-top: 1px solid var(--border);
		h2 {
			margin-bottom: 4rem;
			font-size: 2.2rem;
			line-height: 1.6;
			font-weight: var(--font-weight-medium);
		}
		.list {
			display: grid;
			a {
				display: block;
				text-decoration: none;
				.has_zoom {
					aspect-ratio: 1;
					&::before {
						content: "";
						position: absolute;
						inset: 0;
						border-radius: var(--border-r);
						box-shadow: inset 0 0 0 1px var(--border);
						z-index: 3;
					}
				}
				.caption {
					display: block;
					margin-top: 1.5rem;
					font-size: 1.8rem;
					line-height: 1.6;
					font-weight: var(--font-weight-medium);
				}
			}
		}
		@media screen and (min-width: 744px), print {
			.list {
				grid-template-columns: repeat(3, 1fr);
				gap: 5rem 2.8rem;
			}
		}
		@media screen and (max-width: 743px) {
			padding-block: 3rem 4rem;
			h2 {
				margin-bottom: 3rem;
				font-size: 1.8rem;
			}
			.list {
				grid-template-columns: repeat(2, 1fr);
				gap: 4rem 1.5rem;
				a {
					.caption {
						margin-top: 1rem;
						font-size: 1.3rem;
					}
				}
			}
		}
	}
	.map {
		padding-block: 4rem 8rem;
		border-top: 1px solid var(--border);
		h2 {
			margin-bottom: 4rem;
			font-size: 2.2rem;
			line-height: 1.6;
			font-weight: var(--font-weight-medium);
		}
		.tab {
			display: flex;
			li {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 14.2rem;
				height: 4.8rem;
				background-color: #fff;
				font-size: 1.4rem;
				font-weight: var(--font-weight-medium);
				cursor: pointer;
				transition: color var(--transition), background var(--transition);
				&.is-active {
					background-color: var(--color-base);
					color: #fff;
				}
				@media (hover) {
					&:not(.is-active):hover {
						background-color: #ddd;
					}
				}
			}
		}
		.contents {
			& > div {
				display: none;
				&.is-active {
					display: block;
				}
			}
			iframe {
				width: 100%;
				height: 60rem;
			}
		}
		@media screen and (min-width: 744px), print {
			.list {
				grid-template-columns: repeat(3, 1fr);
				gap: 5rem 2.8rem;
			}
		}
		@media screen and (max-width: 743px) {
			padding-block: 3rem 4rem;
			h2 {
				margin-bottom: 3rem;
				font-size: 1.8rem;
			}
			.tab {
				display: flex;
				li {
					width: 50%;
					height: 4rem;
					font-size: 1.3rem;
				}
			}
			.contents {
				iframe {
					width: 100%;
					height: 80vw;
				}
			}
		}
	}

}


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

	お知らせ

============================================================================= */
.news_column {
	@media screen and (min-width: 744px), print {
		display: flex;
		flex-direction: row-reverse;
		gap: 3.2rem;
		padding-bottom: 8rem;
		.column_main {
			flex-grow: 1;
		}
		.column_side {
			width: 27.6rem;
			flex-shrink: 0;
		}
		.wp-pagenavi {
			margin-bottom: 0;
		}
	}
	@media screen and (max-width: 743px) {
		.column_side {
			margin-top: 6rem;
			margin-bottom: 4rem;
		}
	}
	.news_list {
		display: flex;
		flex-direction: column;
		gap: 2.4rem;
		a {
			display: block;
			background: rgba(255,255,255,0.7);
			border: 1px solid #fff;
			border-radius: var(--border-r);
			padding: 6rem;
			box-shadow: 0px .2rem .4rem rgba(0,0,0,0.08);
			backdrop-filter: blur(.4rem);
			text-decoration: none;
			.title {
				margin-bottom: 1rem;
				font-size: 2.2rem;
				line-height: 1.6;
				font-weight: var(--font-weight-bold);
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}
			.meta {
				display:flex;
				gap: 2.4rem;
				font-size: 1.4rem;
				line-height: 1.4;
			}
			.category {
				display: flex;
				flex-wrap: wrap;
				li:not(:last-child)::after {
					content: ",";
					margin-right: .4em;
				}
			}
			.excerpt {
				margin-top: 3.2rem;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			&.-new .title::before {
				content: "NEW";
				display: inline-block;
				margin-right: 1rem;
				padding: 0.5rem 2rem;
				background: var(--gradient-orange);
				border-radius: 10rem;
				font-family: var(--font-family-en);
				font-weight: var(--font-weight-medium);
				color: #fff;
				font-size: 1.4rem;
				vertical-align: 0.15em;
			}
		}
		@media screen and (max-width: 743px) {
			gap: 1.6rem;
			a {
				padding: 2.4rem;
				.title {
					font-size: 1.8rem;
					-webkit-line-clamp: 2;
				}
				.meta {
					gap: 2rem;
					font-size: 1.3rem;
				}
				.excerpt {
					margin-top: 1.6rem;
				}
				&.-new .title::before {
					padding: 0.4rem 1.5rem;
					font-size: 1.05rem;
					vertical-align: 0.15em;
				}
			}
		}
	}
	.column_side {
		dl {
			margin-bottom: 2.4rem;
		}
		dt {
			position: relative;
			padding: 1rem 0;
			border-bottom: 1px solid var(--border);
			font-weight: var(--font-weight-bold);
			font-size: 1.8rem;
			line-height: 1.6;
			&[data-acc] {
				cursor: pointer;
				&::before,
				&::after {
					content: "";
					position: absolute;
					top: calc(50% - 1px);
					right: 0.5rem;
					width: 1.4rem;
					height: 2px;
					background: linear-gradient(90deg, #B268D4 0%, #D468C0 50%, #FBB196 100%);
				}
				&::after {
					background: #D468C0;
					transform: rotate(90deg);
					transition: transform var(--transition), opacity var(--transition);
				}
				&.-open::after {
					transform: rotate(0);
					opacity: 0;
				}
			}

		}
		.latest {
			padding-top: 2.4rem;
			li:not(:first-child) {
				margin-top: 1rem;
				padding-top: 1rem;
				border-top: 1px solid var(--border);
			}
			a {
				display: block;
				text-decoration: none;
				line-height: 1.6;
				font-size: 1.4rem;
				.date {
					display: block;
					font-size: 1.2rem;
				}
				.title {
					display: block;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}
		}
		.category_list {
			margin-top: 2.4rem;
		}
		@media screen and (max-width: 743px) {
			dt {
				font-size: 1.6rem;
			}
		}
	}
}

.news_detail_contents {
	@media screen and (min-width: 744px), print {
		padding-inline: calc(((100% - 4rem * 2) - 104rem) / 2);
	}
	.news_detail_header {
		margin-bottom: 4rem;
		padding-bottom: 2.4rem;
		border-bottom: 1px solid var(--border);
		font-weight: var(--font-weight-medium);
		h1 {
			--ls: .04em;
			margin-bottom: 1.6rem;
			font-size: 4rem;
			line-height: 1.4;
			font-weight: var(--font-weight-medium);
		}
		.meta {
			display: flex;
			align-items: center;
			gap: 1.6rem;
			time {
				font-size: 1.4rem;
				font-weight: var(--font-weight-reg);
			}
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 3rem;
			padding-bottom: 2rem;
			h1 {
				font-size: 2.4rem;
			}
			.meta {
				flex-wrap: wrap;
				gap: .4rem 1.2rem;
			}
		}
	}
	.entry_body {
		.entry_column {
			margin-block: 4rem;
			a {
				display: block;
				img {
					border-radius: var(--border-r);
				}
				.caption {
					display: block;
					margin-top: 1.6rem;
				}
			}
		}
		@media screen and (min-width: 744px), print {
			.entry_column {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 4rem;
			}
		}
		@media screen and (max-width: 743px) {
			.entry_column {
				display: flex;
				flex-direction: column;
				gap: 3rem;
			}
		}
	}
	.news_tel {
		margin-top: 8rem;
		text-align: center;
		font-size: 1.8rem;
		line-height: 1.6;
		font-weight: var(--font-weight-medium);
		dd {
			margin-top: 1rem;
			font-size: 1.4rem;
			a {
				position: relative;
				display: inline-block;
				padding-left: 3.6rem;
				font-size: 3.2rem;
				line-height: 1.6;
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: calc(50% - 3rem / 2);
					width: 3rem;
					height: 3rem;
					background: url(../img/ico-tel.svg) no-repeat 50%;
					background-size: 100%;
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
			font-size: 1.5rem;
			dd {
				margin-top: .3rem;
				font-size: 1.2rem;
				a {
					font-size: 3rem;
				}
			}
		}
	}
}


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

	お問い合わせ

============================================================================= */
.contents_box.-form {
	@media screen and (min-width: 744px), print {
		padding-inline: calc(((100% - 4rem * 2) - 92rem) / 2);
	}
}
.form_contents {
	.hissu {
		margin-inline: .3em;
		color: #ff0000;
		font-weight: var(--font-weight-bold);
	}
	.form_notes {
		margin-block: -2.4rem 4rem;
		text-align: right;
	}
	.form_item {
		margin-bottom: 4rem;
		dt {
			margin-bottom: 0.8rem;
			font-weight: var(--font-weight-bold);
			.notes {
				display: block;
				margin-top: 0.3rem;
				font-weight: var(--font-weight);
			}
		}
		ul {
			display: flex;
			gap: 4rem;
		}
		.notes {
			margin-top: 0.8rem;
			font-size: 1.3rem;
		}
	}

	.privacy_txt {
		margin-top: 4rem;
		padding: 2rem;
		a {
			font-weight: var(--font-weight-medium);
		}
	}
	.privacy_check {
		width: fit-content;
		margin-top: 4rem;
		margin-inline: auto;
		font-weight: var(--font-weight-bold);
		li {
			display: flex;
			align-items: center;
		}
	}
	@media screen and (max-width: 743px) {
		.form_notes {
			margin-block: -1rem 3rem;
		}
		.form_item {
			ul {
				display: block;
			}
			.notes {
				font-size: 1.2rem;
			}
		}
		.privacy_txt {
			margin-top: 2rem;
			padding: 0;
		}
		.privacy_check {
			margin-top: 2rem;
		}
	}

	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=number],
	input[type=date],
	input[type=url],
	textarea,
	select {
		width: 100%;
		height: 4.8rem;
		padding: 0 1.5em;
		background-color: #fff;
		border: 1px solid var(--border);
		border-radius: .8rem;
		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;
		}
	}
	textarea {
		height: 24rem;
		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: 4.8rem;
		gap: 0.8rem;
		.check {
			position: relative;
			width: 2.4rem;
			height: 2.4rem;
			border: 1px solid var(--border);
		}
		input[type=radio] {
			& + .check {
				border-radius: 100%;
				&::after {
					content: "";
					position: absolute;
					inset: .5rem;
					background-color: var(--color-base);
					border-radius: 100%;
					opacity: 0;
					transition: opacity .1s;
				}
			}
			&:checked {
				& + .check {
					&::after {
						opacity: 1;
					}
				}
			}
		}
		input[type=checkbox] {
			& + .check {
				border-radius: .3rem;
				&::after {
					content: "";
					position: absolute;
					left: .8rem;
					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;
					}
				}
			}
		}
	}

	.submit {
		margin-top: 4rem;
		text-align: center;
		:disabled {
			opacity: 0.3;
		}
	}
	@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 {
			font-size: 16px;
		}
		label {
			height: 3.6rem;
		}
	}

	.form_item {
		.wpcf7-form-control {
			display: flex;
			gap: 4rem;
		}
		.wpcf7-list-item {
			margin: 0;
		}
		@media screen and (max-width: 743px) {
			.wpcf7-form-control {
				display: block;
				& > * {
					display: block;
				}
			}
		}
	}
}
.contact_fin_contents {
	text-align: center;
	.lead_text {
		margin-bottom: 6rem;
		font-size: 2rem;
		font-weight: var(--font-weight-medium);
	}
	@media screen and (max-width: 743px) {
		.lead_text {
			margin-bottom: 3rem;
			font-size: 1.6rem;
		}
	}
}


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

	プライバシーポリシー

============================================================================= */
.privacypolicy_contents {
	& > section {
		margin-top: 4rem;
	}
	h2 {
		font-size: 2rem;
		line-height: 1.6;
	}
	.box {
		padding: 2rem 4rem;
		border: 1px solid var(--border);
		dt {
			font-weight: var(--font-weight-medium);
		}
	}
	@media screen and (max-width: 743px) {
		h2 {
			font-size: 1.6rem;
		}
		.box {
			padding: 1.6rem 2rem;
			border: 1px solid var(--border);
		}
	}
}

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

	404

============================================================================= */
.contents_404 {
	text-align: center;
	font-size: 1.8rem;
	.lead {
		font-size: 2.4rem;
		font-weight: var(--font-weight-medium);
	}
	.back_btn {
		margin-top: 6rem;
	}
	@media screen and (max-width: 743px) {
		font-size: 1.5rem;
		.lead {
			font-size: 2rem;
			line-height: 1.6;
		}
		.back_btn {
			margin-top: 3rem;
		}
	}
}