@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');


@-webkit-keyframes blink {
	0%{opacity:0.5;} 100%{opacity:1;}
}
@keyframes blink{
	0%{opacity:0.5;} 100%{opacity:1;}
}
.blink {
	animation:blink 1s ease alternate;
	-webkit-animation:blink 0.5s ease infinite alternate;
}

/* ============================================================================================================
	var setting
============================================================================================================ */
* {
	--fontFamily-body:'Noto Sans JP' ,sans-serif;
	--fontFamily-sans:'Noto Sans JP' ,sans-serif;
	--fontFamily-serif:'Noto Serif JP' ,serif;
	--fontFamily-sansflex:'Google Sans Flex' ,'Noto Sans JP' ,sans-serif;

	--body-bg:#fff;
	--body-fontSize:16px;
	--body-fontColor:#011;
	--body-fontWeight:400;
	--body-lineHeight:2;

	--color-accent:#2f7d5b;
	--color-accent-shadow:#97e3c1;
	--color-pale:#e8f1ea;
	--color-light:#afd7c3;
	--color-fresh:#ecfdf4;
	--color-dark:#1a563c;
	--color-table-label:#fafcfa;
	--color-blue:#3b82c4;
	--color-lightblue:#dee9f5;
	--color-paleblue:#edf4fb;
	--color-line:#090;

	--content-fore:#011;
	--content-fore-sub:var(--color-accent);
	--content-sub:#233;
	--content-back:#fff;
	--content2-fore:#011;
	--content2-fore-sub:var(--color-accent);
	--content2-sub:#233;
	--content2-back:#f6f9f5;
	--content3-fore:#fff;
	--content3-fore-sub:#fff;
	--content3-sub:#eee;
	--content3-back:#2f7d5b;

	--content-bg-fore:#fff;

	--card:#f6f9f5;
	--card-border:#dde7de;
	--card-icon:#e8f1ea;

	--card2:#fff;
	--card2-hover:#ebf9ec;
	--card2-border:#b1d9b5;
	--card2-icon:#e3f7ed;

	--ink:#011;
	--ink-2:#344;
	--ink-3:#677;
	--fv-height:100vh;
}

@media screen and (min-width:800px) { 
	* {
	}
}
@media screen and (max-width:799px) { 
	* {
		--body-fontSize:18px;
		--body-lineHeight:1.8;
	}
}



/* ============================================================================================================
	CSS reset
============================================================================================================ */
* {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
html ,body ,div ,p ,span ,iframe ,a ,img ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,h7 ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
strong ,em ,small ,blockquote ,q ,pre ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	color:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	text-decoration:inherit;
	vertical-align:baseline;
}
th ,td {
	vertical-align:middle;
}
button ,input ,textarea ,select {
	max-width:100%;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	text-decoration:none;
	letter-spacing:1px;
}
button ,
input[type='submit'] {
	padding:0.3em 1.5em;
}

html ,body {
	min-height:100%;
}
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,h7 {
	font-family:var(--fontFamily-serif);
}
a {
	transition: all 0.5s ease;
}

img {
	vertical-align:bottom;
	max-width:100%;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}
ol ,ul ,li {
	list-style:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
blockquote ,q {
	quotes:none;
}
blockquote:before ,blockquote:after
,q:before ,q:after {
	content:'';
	content:none;
}
header ,footer ,nav ,article ,section ,aside {
	display:block;
}

em {
	color:var(--color-dark);
	font-weight:600;
}

/* ============================================================================================================
	common
============================================================================================================ */
@media screen and (min-width:800px) { 
	.dispSP {
		display:none !important;
	}
	a[href^="tel:"] {
		pointer-events:none;
	}

}
@media screen and (max-width:799px) { 
	.dispPC {
		display:none !important;
	}
}

.noDisp {
	display:none;
}
.hidden {
	visibility:hidden;
}

.anchorLink {
	cursor:pointer;
}


.small {
	font-size:80%;
}
.em {
	font-size:110%;
}
.strong {
	font-size:180%;
	font-weight:600;
}
.bold {
	font-weight:700;
}

.center {
	text-align:center;
}

.ellipsis {
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis;
}

.line-clamp {
	display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:1;
}
.line-clamp.l2 {
	-webkit-line-clamp:2;
}
.line-clamp.l3 {
	-webkit-line-clamp:3;
}

.sendIP {
	padding-top:3em;
	color:#999;
	font-size:80%;
	text-align:right;
}

.withArrow {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.anchorLink {
	cursor:pointer;
}

@media screen and (min-width:800px) { 
	.withArrow:hover {
		font-weight:700;
	}
	.withArrow:hover .material-symbols-outlined {
		animation:hover-slide 1s ease-out infinite;
		font-weight:700;
	}

	@keyframes hover-slide {
		 0%	{ transform:translateX(0); }
		90%	{ transform:translateX(0.3em);}
	}
}
@media screen and (max-width:799px) { 
}



/* =================================================================================
	cleafix
================================================================================= */
.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	line-height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	display: block; /* for IE8 */
	zoom: 1; 
}



/* =================================================================================
	flex
================================================================================= */
.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex.left {
	justify-content:flex-start;
}
.flex.right {
	justify-content:flex-end;
}
.flex.between {
	justify-content:space-between;
}
.flex.around {
	justify-content:space-around;
}
.flex.evenly {
	justify-content:space-evenly;
}

.flex.top {
	align-items:flex-start;
}
.flex.bottom {
	align-items:flex-end;
}
.flex.stretch {
	align-items:stretch;
}

.flex.column {
	flex-direction:column;
}
.flex.rev {
	flex-direction:row-reverse;
}
.flex.column.rev {
	flex-direction:column-reverse;
}

.flex.wrap {
	flex-wrap:wrap;
}

.flex.col2 > * {
	width:calc(100% / 2);
}
.flex.col3 > * {
	width:calc(100% / 3);
}
.flex.col4 > * {
	width:calc(100% / 4);
}


.flex > .half {
	width:50%;
}
.flex > .full {
	width:100%;
}

.height-inherit > * {
	height:100%;
}
.height-inherit-all * {
	height:100%;
}


/* ======================================================
	grid
====================================================== */
.grid-2 {
	padding:0 2em;
	display:grid;
	grid-template-columns:repeat(2 ,1fr);
	align-items:center;
	gap:3em;
}
.grid-2.rev > :first-child {
	order:2;
}
@media screen and (max-width:799px) { 
	.grid-2 {
		padding:0;
		grid-template-columns:1fr;
	}
}


/* ======================================================
	button
====================================================== */
.button.flex {
	gap:1em;
}

.button > * {
	padding:0.3em 1em 0.4em;
	font-weight:700;
	color:#fff;
	background:var(--color-accent);
	border:1px solid rgba(255,255,255,0.6);
	border-radius:0.4em;
	transition: all 0.5s ease;
	display:flex;
	align-items:center;
	gap:0.3em;
}
.button > *.rev {
	color:var(--color-accent);
	background:var(--color-pale);
}
.button > *.blue {
	background:var(--color-blue);
}
.button > *.line {
	background:var(--color-line);
}

.button > *:not(.noMark):after {
	content:"\025b6";
	font-size:90%;
}
.button > *.anchorLink:not(.noMark):after {
	content:"▼";
}
.button > * span {
	font-size:90%;
}

.button.wide > * {
	padding:0.6em 2em 0.8em;
}
.button.wide > * span {
	font-size:100%;
}

.button.semi-wide > * {
	padding:0.5em 2em 0.6em;
}
.button.semi-wide > * > span {
	font-size:100%;
}

.button.slim > * {
	padding:0.1em 1em 0.2em;
}
.button.slim > * span {
	font-size:80%;
}

.button > * .icon {
	padding-top:0.1em;
	width:1.2em;
}

.button > *.line2 {
	align-items:flex-end;
	gap:2em;
	line-height:1.5;
}


@media screen and (min-width:800px) {
	.button > *:hover {
		color:var(--color-accent);
		background:var(--color-pale);
	}
	.button > *.rev:hover {
		color:var(--color-pale);
		background:var(--color-accent);
	}
	.button > *.blue:hover {
		color:var(--color-blue);
		background:#fff;
	}

}

@media screen and (max-width:799px) {
}



/* ======================================================
	tag list
====================================================== */
.tag-list {
	gap:1em;
}
.tag-list .tag {
	padding:0 0.6em 0.2em;
	line-height:1.4;
	color:#fff;
	background:var(--color-accent);
	border-radius:0.2em;
}
.tag-list .tag.pale {
	color:var(--color-accent);
	background:var(--color-pale);
}
.tag-list .tag.blue {
	color:var(--color-blue);
	background:var(--color-lightblue);
}
.tag-list .tag span {
	font-size:80%;
	font-weight:500;
	font-family:var(--fontFamily-sansflex);
}


/* ======================================================
	form panel
====================================================== */
.form-panel-frame {
	padding-top:4em;
}
.form-panel {
	width:1000px;
	padding:2em 4em;
	background:#fff;
	border:1px solid var(--color-light);
	border-radius:0.5em;
}

.formTable {
	font-size:95%;
}




/* ============================================================================================================
	body
============================================================================================================ */
body {
	position:relative;
	line-height:var(--body-lineHeight);
	font-size:var(--body-fontSize);
	font-weight:var(--body-fontWeight);
	color:var(--body-fontColor);
	font-family:var(--fontFamily-body);
	text-align:justify;
	font-feature-settings:'palt';
	font-kerning:normal;
}

.innerFrame {
	width:1400px;
	margin:0 auto;
}



@media screen and (min-width:800px) { 
	body {
		letter-spacing:0.05em;
	}
}
@media screen and (max-width:799px) { 
	body {
	}

	.innerFrame {
		width:480px;
		min-width:480px;
		max-width:480px;
	}
}




/* ============================================================================================================
	h1
============================================================================================================ */
#h1 {
	background:var(--card);
}
#h1 .innerFrame {
	padding:0 0.5em 0.3em;
	line-height:1.3;
}
#h1 span {
	font-size:70%;
}
@media screen and (min-width:800px) { 
	#h1 span + span:before {
		content:" | ";
	}
}
@media screen and (max-width:799px) { 
	#h1 .innerFrame {
		padding:0.3em 0.8em;
	}
	#h1 span {
		display:block;
		font-size:80%;
	}
}


/* ============================================================================================================
	header
============================================================================================================ */
header {
	position:sticky;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	top:0;
	background:rgba(255,255,255,0.9);
	backdrop-filter:blur(0.2em);
	border-bottom:1px solid var(--color-accent);
}


.header-inner {
	padding:0.8em 1em;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.header-logo {
	display:flex;
	align-items:center;
	gap:0.5em;
}
.header-icon img {
	width:3em;
}
.header-text {
	line-height:1.4;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
}
.header-text .ja {
	font-family:var(--fontFamily-serif);
	font-size:115%;
	font-weight:600;
	letter-spacing:-0.02em;
}
.header-text .en {
	padding-left:0.2em;
	color:#888;
	font-size:75%;
	font-family:var(--fontFamily-sansflex);
}

@media screen and (max-width:799px) {
}


/* =================================================================================
	header > nav
================================================================================= */
.header-nav {
	display:flex;
	align-items:center;
	gap:2em;
}
.header-nav ul {
	display:flex;
	align-items:center;
	gap:0.8em;
}

.header-nav .header-off {
	display:none;
}

.header-nav ul a {
	padding:8px 0.5em 6px;
	border-bottom:2px solid transparent;
}
.header-nav ul a span {
	font-size:95%;
	font-weight:500;
}
@media screen and (min-width:800px) {
	.header-nav ul .active a {
		color:var(--color-accent);
		border-bottom-color:var(--color-accent);
	}
	.header-nav ul .active a span {
		font-weight:700;
	}
	.header-nav ul a:hover {
		border-bottom-color:var(--color-accent);
	}
}

@media screen and (max-width:799px) {
	.header-nav {
		position:fixed;
		z-index:1;
		top:calc(3em + 0.8em * 2);
		left:0;
		width:100% !important;
		height:100vh !important;
		padding:3em 2em !important;
		background:rgba(255,255,255,0.95);
		backdrop-filter:blur(0.2em);
		border-top:1px solid var(--color-accent);

		display:none;
	}
	.header-nav ul {
		padding-bottom:2.5em;
		flex-direction:column;
		gap:2em;
	}
	.header-nav ul a {
		padding:0.3em 0;
	}
	.header-nav ul a span {
		font-size:110%;
	}
}


/* =================================================================================
	header > contact
================================================================================= */
@media screen and (max-width:799px) {
	.header-contact.flex {
		flex-direction:column-reverse;
		gap:2em;
	}
}


/* ======================================================
	header > contact > tel
====================================================== */
.header-contact .tel {
	padding:0 1em;
	line-height:1.2;
}


.header-contact .tel a span {
	color:var(--color-accent);
	font-size:150%;
	font-weight:500;
	font-family:var(--fontFamily-sansflex);
}
.header-contact .tel .time {
	font-size:80%;
}

@media screen and (max-width:799px) {
	.header-contact .tel.flex.bottom {
		line-height:1.4;
		align-items:center;
	}
	.header-contact .tel a span {
		font-size:160%;
	}
	.header-contact .tel .time {
		font-size:100%;
	}

}


/* ======================================================
	header > contact > button
====================================================== */
.header-contact .button a {
	border-color:var(--color-accent);
}

@media screen and (max-width:799px) {
	.header-contact .button a {
		padding:0.3em 2em 0.4em;
	}
	.header-contact .button a span {

		font-size:100%;
	}
	.header-contact .button a:after {
		content:none;
	}

}


/* ======================================================
	sp menu button
====================================================== */
.sp-menu-button {
	position:relative;
	width:3em;
	aspect-ratio:1/1;
	background:var(--color-pale);
	backdrop-filter:blur(0.2em);
	border:2px solid var(--color-accent);
	border-radius:0.3em;
}

.sp-menu-button span,
.sp-menu-button:before ,
.sp-menu-button:after {
	position:absolute;
	top:50%;
	left:0;
	right:0;
	display:block;
	width:70%;
	margin:auto;
	height:3px;
	background:var(--color-accent);
	transform:translateY(-50%);
	transition: all 0.5s ease;
}
.sp-menu-button:before {
	content:"";
	top:calc(50% - 20%);
}
.sp-menu-button:after {
	content:"";
	top:calc(50% + 20%);
}

.navi-open .sp-menu-button span {
	opacity:0;
}
.navi-open .sp-menu-button:before {
	top:50%;
	transform:translateY(-50%) rotate(225deg);
}
.navi-open .sp-menu-button:after {
	top:50%;
	transform:translateY(-50%) rotate(-225deg);
}




/* ============================================================================================================
	footer
============================================================================================================ */
footer {
	position:relative;
	z-index:20;
	color:#fff;
	background:var(--color-dark);
}

.footer-inner {
	padding:3em;
	display:flex;
	gap:10em;
}
@media screen and (max-width:799px) {
	.footer-inner {
		flex-direction:column;
		gap:1em;
	}
}


/* ======================================================
	footer-about
====================================================== */
footer .header-text .ja {
	font-weight:700;
}
footer .header-text .en {
	font-weight:600;
	color:#ddd;
}

.footer-info {
	padding-top:1em;
	padding-left:0.5em;
	line-height:1.4;
}
.footer-info p {
	font-weight:500;
	font-size:90%;
}
.footer-info .addr {
	padding-bottom:0.5em;
}

@media screen and (max-width:799px) {
	.footer-about {
		display:flex;
		flex-direction:column;
		align-items:center;
	}
}


/* ======================================================
	footer-links
====================================================== */
.footer-links h2 {
	padding:0 0.3em;
	font-weight:700;
	border-bottom:1px solid #ccc;
}
.footer-links ul {
	padding:0.3em 0.5em;
}
.footer-links a {
	padding:0 0.2em;
	color:#eee;
	font-size:90%;
	font-weight:500;
	border-bottom:1px solid transparent;
}

@media screen and (min-width:800px) {
	.footer-links a:hover {
		color:#fff;
		border-bottom:1px solid #fff;
	}
}
@media screen and (max-width:799px) {
	.footer-about + .footer-links {
		padding-top:1em;
	}
	.footer-links {
		padding:0 1em;
	}
}


/* ======================================================
	copyright
====================================================== */
.copyright {
	padding:1em 0;
	text-align:center;
}
.copyright p {
	font-size:90%;
	letter-spacing:0;
}




/* ============================================================================================================
	float buttons
============================================================================================================ */
#float-buttons {
	position:fixed;
	z-index:900;
	right:1em;
	bottom:1em;
	width:9em;
	display:flex;
	flex-direction:column;
	gap:0.6em;
}
#float-buttons.off {
	display:none;
}

#float-buttons a {
	padding:0.3em 0;
	color:#fff;
	background:var(--color-accent);
	border:1px solid rgba(255,255,255,0.6);
	border-radius:1.6em;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:0.3em;
}
#float-buttons a.tel {
	background:#06c;
}
#float-buttons a.line {
	background:var(--color-line);
}

#float-buttons a img {
	width:1em;
}
#float-buttons a span {
	font-size:90%;
	font-weight:600;
}

@media screen and (min-width:800px) {
	#float-buttons a:hover {
		filter:brightness(1.2);
	}
}
@media screen and (max-width:799px) {
	#float-buttons {
		right:0.5em;
		bottom:0.5em;
		width:7em;
		gap:0.5em;
	}
	#float-buttons a {
		gap:0.2em;
	}
	#float-buttons a span {
		font-size:80%;
	}

}







/* ============================================================================================================
	main contents
============================================================================================================ */
main {
	position:relative;
}

.contents-filter {
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
}



/* =================================================================================
	page-contents (block)
================================================================================= */
.bg-kawasaki {
	--bg-image:url(images/common/fv-kawasaki.webp);
}
.bg-estate {
	--bg-image:url(images/common/fv-estate.webp);
}
.bg-consult {
	--bg-image:url(images/common/fv-consult.webp);
}
.bg-desk {
	--bg-image:url(images/common/fv-desk.webp);
}
.bg-recruit {
	--bg-image:url(images/common/fv-recruit.webp);
}

.page-contents {
	--section-fore:var(--content-fore);
	--section-sub:var(--content-sub);
	--section-fore-sub:var(--content-fore-sub);
	--section-back:var(--content-back);
}
.page-contents.color2 {
	--section-fore:var(--content2-fore);
	--section-sub:var(--content2-sub);
	--section-fore-sub:var(--content2-fore-sub);
	--section-back:var(--content2-back);
}
.page-contents.color3 {
	--section-fore:var(--content3-fore);
	--section-sub:var(--content3-sub);
	--section-fore-sub:var(--content3-fore-sub);
	--section-back:var(--content3-back);
}

.page-contents.bg {
	--section-fore:var(--content-bg-fore);
	--section-back:var(--bg-image) 50% 50% no-repeat;
}

.page-contents {
	color:var(--section-fore);
	background:var(--section-back);
	background-size:cover;
}
.page-contents:not(.bg) {
	padding:6em 0;
}
.page-contents .innerFrame {
	padding:0 3em;
}

.page-contents.bg .contents-filter {
	padding:6em 0;
	text-shadow:1px 1px 0.1em #000;
}
.page-contents.bg .contents-filter .button {
	text-shadow:none;
}
@media screen and (max-width:799px) {
	.page-contents .innerFrame {
		padding:0 1.5em;
	}
	.page-contents.bg .contents-filter {
		padding:3em 0;
	}
	.page-contents:not(.bg) {
		padding:3em 0;
	}
}



/* =================================================================================
	page-header
================================================================================= */
.page-header-content {
	min-height:28em;
}
.page-header-content h1 {
	line-height:1.4;
}
.page-header-content h1 span {
	font-size:360%;
	font-weight:600;
}
.page-header-content p {
	padding-top:1em;
}
.page-header-content p span {
	font-size:120%;
	font-weight:500;
}

.page-header-content .button {
	padding-top:2em;
}

.page-header-text {
	padding-top:1em;
}
.page-header-text p {
	font-weight:500;
}
.page-header-text p + p {
	padding-top:0.6em;
}

@media screen and (max-width:799px) {
	.page-header-content {
		min-height:32em;
	}
	.page-header-content.flex.top {
		gap:1em;
	}
	.page-header-content h1 {
		font-size:240%;
	}
	.page-header-content .button {
		width:100%;
		padding-top:3em;
	}
}


/* =================================================================================
	cta
================================================================================= */
.page-contents.section-cta {
	padding:4em 1em;
}

@media screen and (max-width:799px) { 
	.section-cta .button.flex {
		padding-top:3em;
		flex-direction:column;
		gap:1.5em;
	}
	.section-cta .button a {
	}
}




/* ============================================================================================================
	contents
============================================================================================================ */

/* =================================================================================
	contents-catch
================================================================================= */
.contents-catch-en {
	color:var(--section-fore-sub);
	gap:0.5em;
	font-family:var(--fontFamily-sansflex);
}
.contents-catch-en:before {
	content:"";
	width:2em;
	height:1px;
	background:var(--section-fore-sub);
}
.contents-catch-en span {
	padding-top:0.1em;
	font-size:90%;
	font-weight:600;
}

.contents-catch-h1 {
	padding-top:0.5em;
	line-height:1.5;
}
.contents-catch-h1 span {
	font-size:280%;
	font-weight:600;
}
.contents-catch-label {
	line-height:1.4;
}
.contents-catch-label span {
	font-size:200%;
	font-weight:600;
}

.contents-catch-text {
	padding:1em 0.5em 0;
	color:var(--section-sub);
}
.contents-catch-text span {
	font-size:110%;
	font-weight:500;
}

.contents-catch-message {
	padding:1em 0.5em 0;
	line-height:1.8;
	color:var(--ink-2);
}
.contents-catch-message p + p {
	padding-top:0.6em;
}
.contents-catch-message p span {
	font-size:95%;
}

.contents-catch-sign {
	margin-top:1.5em;
	padding-top:1.5em;
	border-top:1px solid var(--color-light);
}
.contents-catch-sign .flex {
	gap:1em;
	line-height:1;
	font-family:var(--fontFamily-serif);
}
.contents-catch-sign .name {
	font-size:130%;
	font-weight:600;
}

@media screen and (max-width:799px) {
	.contents-catch-en span {
		letter-spacing:0.05em;
	}
	.contents-catch-h1 span {
		font-size:200%;
	}
	.contents-catch-label span {
		font-size:140%;
	}
}


/* ============================================================================================================
	top
============================================================================================================ */

/* =================================================================================
	top - worries
================================================================================= */
.worry-list {
	padding:4em 2em 0;
	display:grid;
	grid-template-columns:repeat(3 ,1fr);
	gap:1.5em;
}
.worry-cell {
	padding:1em;
	background:var(--card);
	border:1px solid var(--card-border);
	border-radius:0.3em;
	gap:1em;
}
.worry-cell .icon {
	height:4em;
	aspect-ratio:1/1;
	background:var(--card-icon);
	border-radius:50%;
	flex-shrink:0;
}
.worry-cell .text {
	flex-grow:1;
}
.worry-cell h2 {
	height:4em;
}
.worry-cell h2 span {
	line-height:1.6;
	font-size:110%;
	font-weight:700;
}
.worry-cell p {
	padding-top:0.5em;
	color:var(--ink-2);
	line-height:1.6;
}
.worry-cell p span {
	font-size:90%;
}

.worry-list + .button {
	padding-top:4em;
}

@media screen and (max-width:799px) {
	.worry-list {
		padding:3em 0 0;
		grid-template-columns:1fr;
	}
	.worry-cell .icon {
		height:3.5em;
	}
	.worry-cell h2 {
		height:3.5em;
	}

	.worry-cell p {
		padding-top:0.3em;
	}
	.worry-cell p span {
		font-size:85%;
	}
}

/* =================================================================================
	top - services
================================================================================= */
.services-grid {
	padding:4em 2em 0;
	display:grid;
	grid-template-columns:1.2fr 1fr;
	align-items:stretch;
	gap:2em;
}

@media screen and (max-width:799px) { 
	.services-grid {
		padding:3em 0 0;
		grid-template-columns:1fr;
	}
}



/* ======================================================
	top - services - panel
====================================================== */
.service-panel {
	min-height:24em;
	background:url(images/common/fv-estate.webp) 50% 50% no-repeat;
	background-size:cover;
	border-radius:0.5em;
	overflow:hidden;
}
.service-panel-content {
	width:100%;
	padding:1.5em 2em;
	background:linear-gradient( 180deg ,transparent  ,rgba(0,51,34,0.9) );
}
.service-panel-content h2 {
	padding-top:0.5em;
	line-height:1.6;
	color:#fff;
	text-shadow:1px 1px 0 #000;
}
.service-panel-content h2 span {
	font-size:180%;
	font-weight:700;
}
.service-panel-content p {
	padding-top:0.5em;
	line-height:1.8;
	color:#fff;
	text-shadow:1px 1px 0 #000;
}
.service-panel-content p span {
	font-weight:500;
}

.service-panel-content .button {
	padding-top:1.5em;
}

@media screen and (max-width:799px) {
	.service-panel {
		min-height:30em;
	}
	.service-panel-content {
		padding-bottom:3em;
	}
}



/* ======================================================
	top - services - list
====================================================== */
.service-list {
	gap:1.5em;
}
.service-cell {
	position:relative;
	width:100%;
	padding:1.5em 2em;
	background:var(--card2);
	border:1px solid var(--card2-border);
	border-radius:0.3em;
}
.service-cell .en {
	color:var(--color-accent);
}
.service-cell .en span {
	font-size:80%;
	font-weight:500;
	font-family:var(--fontFamily-sansflex);
}
.service-cell h3 {
	line-height:1.4;
}
.service-cell h3 span {
	font-size:130%;
	font-weight:700;
}
.service-cell p {
	padding-top:0.3em;
	color:var(--ink-2);
}


a.service-cell:after {
	content:"\025b6";
	position:absolute;
	top:50%;
	right:0.8em;
	transform:translateY(-50%);
	color:var(--color-accent);
}

@media screen and (min-width:800px) {
	a.service-cell:hover {
		background:var(--card2-hover);
	}
}
@media screen and (max-width:799px) { 
	.service-cell {
		padding-top:1.2em;
		padding-right:3em;
	}
}



/* =================================================================================
	top - why
================================================================================= */
.why-list {
	padding:4em 1em 0;
	display:grid;
	grid-template-columns:repeat(4 ,1fr);
	gap:2.5em;
}
.why-cell .num {
	line-height:1;
	color:var(--color-light);
	font-family:var(--fontFamily-sansflex);
}
.why-cell .num span {
	font-size:200%;
	font-weight:500;
}
.why-cell h2 {
}
.why-cell h2 span {
	font-size:160%;
	font-weight:700;
}
.why-cell p {
	padding-top:0.6em;
	line-height:1.6;
}
.why-cell p span {
	font-size:95%;
}

@media screen and (max-width:799px) { 
	.why-list {
		padding:3em 1em 0;
		grid-template-columns:1fr;
	}
}



/* =================================================================================
	top - about
================================================================================= */
.about-catch-h1 {
	color:var(--color-accent);
	font-family:var(--fontFamily-sansflex);
}
.about-catch + .about-catch {
	padding-top:0.6em;
}

.about-sign {
	padding-top:1em;
	text-align:right;
}
.about-sign .position {
	font-size:90%;
}
.about-sign .name {
	font-size:130%;
	font-weight:600;
	font-family:var(--fontFamily-serif);
}

.about-grid .button {
	padding-top:2em;
}
.about-grid .button a {
	border-color:var(--color-accent);
}
.about-grid .image img {
	border-radius:0.5em;
}

@media screen and (max-width:799px) { 
	.about-grid .image img {
		aspect-ratio:4/3;
		object-fit:cover;
	}
}


/* =================================================================================
	top - recruit
================================================================================= */
.recruit-labels {
	padding:2em 0 0;
	gap:0.5em;
}
.recruit-labels > li {
	padding:0.1em 0.8em 0.3em;
	line-height:1.4;
	background:rgba(255,255,255,0.1);
	backdrop-filter:blur(0.2em);
	border:1px solid #ccc;
	border-radius:3em;
	box-shadow: 1px 1px 0.1em #000;
}
.recruit-labels > li span {
	font-size:95%;
	font-weight:500;
}

.recruit-labels + .button {
	padding-top:3em;
}

@media screen and (max-width:799px) { 
	.recruit-labels > li span {
		font-size:80%;
	}
}


.stats-grid {
	display:grid;
	grid-template-columns:repeat(2 ,1fr);
	gap:1.5em;
}
.stat-cell {
	padding:1.5em 1.5em 1.2em;
	background:rgba(255,255,255,0.1);
	backdrop-filter:blur(0.2em);
	border:1px solid #ccc;
	border-radius:0.3em;
	box-shadow: 1px 1px 0.1em #000;
	line-height:1.6;
}
.stat-cell span {
	font-size:110%;
	font-weight:500;
}
.stat-cell .num {
	line-height:1;
	font-size:280%;
	font-weight:600;
	font-family:var(--fontFamily-sansflex);
}
.stat-cell div + div {
	padding-top:0.3em;
}

@media screen and (max-width:799px) { 
	.stats-grid {
		gap:1em;
	}
	.stat-cell {
		text-align:center;
		padding:1.5em 0.5em 1.2em;
	}
	.stat-cell span {
		font-size:95%;
	}
}



/* =================================================================================
	top - news
================================================================================= */
.news-list {
	padding:2em 4em 0;
}
.news-cell {
	padding:0.3em 1em;
	border-bottom:1px solid var(--color-light);
}
.news-cell a {
	padding:0.6em 2em;
	color:var(--content-sub);
	border-radius:0.3em;
	gap:2em;
}
.news-cell .date {
	font-size:80%;
	color:var(--color-accent);
}
.news-cell .title {
}

@media screen and (min-width:800px) { 
	.news-cell a:hover {
		background:var(--color-pale);
	}
}
@media screen and (max-width:799px) { 
	.news-list {
		padding:2em 0 0;
	}
	.news-cell {
		padding:0.3em 0.5em;
	}
	.news-cell a.flex.left {
		padding:0.6em 0.5em;
		flex-direction:column;
		align-items:flex-start;
		gap:0;
	}
	.news-cell .date {
		font-size:90%;
	}
	.news-cell .title {
		font-size:95%;
	}
}

.news-list + .button {
	padding-top:3em;
}
.news-list + .button a {
	border-color:var(--color-accent);
}


/* ============================================================================================================
	real-estate
============================================================================================================ */

/* =================================================================================
	real-estate - worries
================================================================================= */
.re-worries-list {
	padding:4em 2em 0;
	display:grid;
	grid-template-columns:repeat(3 ,1fr);
	gap:1.5rem;
}
.re-worry-cell {
	padding:1.5em;
	background:var(--card2);
	border:1px solid var(--card2-border);
	border-top:3px solid var(--color-accent);
	border-radius:0.3em;
}

.re-worry-cell .tag {
	font-size:90%;
	font-weight:500;
}
.re-worry-cell h2 span {
	font-size:120%;
	font-weight:700;
}
.re-worry-cell .text {
	padding:0.5em 0 0.8em;
	color:var(--ink-2);
}
.re-worry-cell .text span {
	display:inline-block;
	font-size:95%;
}
.re-worry-cell .solution {
	padding-top:0.8em;
	color:var(--color-accent);
	border-top:1px dashed var(--color-accent);
}
.re-worry-cell .solution span {
	font-size:95%;
	font-weight:600;
}


.re-worry-cell .num {
	line-height:1;
	color:var(--color-dark);
	font-family:var(--fontFamily-sansflex);
}
.re-worry-cell .num span {
	font-size:160%;
	font-weight:500;
}
.re-worry-cell .num + h2 span{
	font-size:140%;
}

.re-worries-list + .button {
	padding-top:4em;
}


/* =================================================================================
	real-estate - properties
================================================================================= */
.re-properties-list {
	padding:4em 2em 0;
	display:grid;
	grid-template-columns:repeat(5 ,1fr);
	gap:0.6em;
}
.re-property-cell {
	padding:1.2em 0;
	line-height:1.6;
	background:var(--card2);
	border:1px solid var(--card2-border);
	border-radius:0.2em;
}
.re-property-cell .icon {
	background:var(--card2-icon);
	border-radius:0.3em;
}
.re-property-cell .icon img {
	width:4em;
}
.re-property-cell h2 {
	padding-top:0.5em;
}
.re-property-cell h2 span{
	font-size:120%;
	font-weight:700;
}
.re-property-cell p {
	color:var(--ink-2);
}
.re-property-cell p span {
	font-size:95%;
}




/* =================================================================================
	real-estate - methods
================================================================================= */
.re-methods-list {
	padding:4em 2em 0;
	display:grid;
	grid-template-columns:repeat(3 ,1fr);
	gap:2em;
}
.re-method-cell {
	position:relative;
	padding:2em 1.5em 2.5em;
	border:1px solid var(--color-light);
	border-radius:0.3em;
}
.re-method-info {
	padding:0 1em 1em;
}
.re-method-cell .sub {
	line-height:1.4;
	letter-spacing:0.1em;
	color:var(--color-accent);
	font-family:var(--fontFamily-sansflex);
}
.re-method-cell .sub span {
	font-size:80%;
	font-weight:500;
}
.re-method-cell h2 span {
	font-size:160%;
	font-weight:700;
}
.re-method-cell .guideline {
	color:var(--ink-2);
	font-family:var(--fontFamily-serif);
}
.re-method-cell .guideline span {
	font-weight:600;
}


/* ======================================================
	real-estate - methods - features
====================================================== */
.re-method-features {
	padding:1em 1em 0;
	border-top:1px solid var(--color-light);
}
.re-method-features li + li {
	padding-top:0.5em;
}
.re-method-features li.title span {
	font-size:110%;
	font-weight:500;
}
.re-method-features li:not(.title) span {
	font-size:95%;
}
.re-method-features li:not(.title) span:before {
	content:"\2713";
	color:var(--color-accent);
	font-weight:700;
	padding-right:0.5em;
}

.re-method-cell.recommended {
	background:var(--color-fresh);
	border:2px solid var(--color-accent);
	box-shadow:0 0 1.2em var(--color-accent-shadow);
}
.re-method-cell .badge {
	position:absolute;
	top:0;
	left:1em;
	transform:translateY(-50%);
	padding:0 1em 0.2em;
	line-height:1.4;
	color:#fff;
	background:var(--color-accent);
	border-radius:2em;
}
.re-method-cell .badge span {
	font-size:90%;
	font-weight:700;
}


/* ======================================================
	real-estate - methods - compare
====================================================== */
.re-methods-table {
	padding:4em 2em 0;
}
.re-methods-table {
}
.compare-table {
	width:100%;
}
.compare-table th ,
.compare-table td {
	padding:1em 1.5em;
	border-right:1px solid var(--color-pale);
	border-bottom:1px solid var(--color-light);
	text-align:left;
}
.compare-table th ,
.compare-table .highlight {
	background:var(--color-pale);
	color:var(--color-dark);
	font-weight:600;
}
.compare-table .label {
	font-weight:600;
	background:var(--color-table-label);
}



/* =================================================================================
	real-estate - consultant value
================================================================================= */
.consultant-value {
	background:var(--color-pale);
	padding:4em 3em;
	border-radius:0.5em;
}
.consultant-value .contents-catch-h1 span {
	font-size:200%;
}
.consultant-value .contents-catch-text p + p {
	padding-top:0.5em;
}

.re-value-list {
}
.re-value-cell {
	padding:0.6em 1em;
	border-bottom:1px dashed var(--color-light);
}
.re-value-cell p strong ,
.re-value-cell p span {
}
.re-value-cell p:before {
	content:"";
	width:1em;
	height:2px;
	margin-right:0.5em;
	background:var(--color-accent);
}
.re-value-cell p strong + span:before {
	content:"：";
}




/* =================================================================================
	real-estate - sell flow
================================================================================= */
.re-flow-list {
	padding:4em 2em 0;
	display:grid;
	grid-template-columns:repeat(3 ,1fr);
}

.re-flow-cell {
	padding:1.5em 2em 1.5em;
	background:#fff;
	border:1px solid var(--color-pale);
}
.re-flow-cell .sub {
	line-height:1.2;
	letter-spacing:0.1em;
	color:var(--color-accent);
	font-family:var(--fontFamily-sansflex);
}
.re-flow-cell .sub span {
	font-size:90%;
	font-weight:500;
}
.re-flow-cell h2 {
	line-height:1.4;
}
.re-flow-cell h2 span {
	font-size:160%;
	font-weight:700;
}
.re-flow-cell p {
	padding-top:0.5em;
	line-height:1.6;
	color:var(--ink-2);
}



/* =================================================================================
	real-estate - rental services
================================================================================= */
.re-rental-list {
	padding:4em 2em 0;
	display:grid;
	grid-template-columns:repeat(4 ,1fr);
	gap:1em;
}
.re-rental-cell {
	padding:1.5em;
	background:var(--card2);
	border:1px solid var(--card2-border);
	border-radius:0.2em;
}
.re-rental-cell h2 span {
	font-size:150%;
	font-weight:700;
}
.re-rental-cell p {
	padding-top:0.3em;
	line-height:1.8;
	color:var(--ink-2);
}
.re-rental-cell p span {
	font-size:95%;
}


/* ======================================================
	real-estate - rental services - search
====================================================== */
.re-rental-search {
	padding:4em 2em 0;
}
.re-rental-search-panel {
	padding:2em;
	background:var(--color-lightblue);
	border-radius:0.5em;
}
.re-rental-search-panel h2 span {
	font-size:160%;
	font-weight:700;
}
.re-rental-search-panel p {
	color:var(--ink-2);
}
.re-rental-search-panel p span {
	font-size:110%;
	font-weight:500;
}



/* ============================================================================================================
	consulting
============================================================================================================ */

/* =================================================================================
	consulting - pillar
================================================================================= */
.section-consulting .grid-2 {
	padding:0 3em;
	align-items:flex-start;
	gap:4em;
}


/* ======================================================
	consulting - text - catch
====================================================== */
.pillar-h2.flex {
	padding:2em 0 1em;
	gap:0.6em;
}
.pillar-h2:before {
	content:"";
	width:0.2em;
	height:1.4em;
	background:var(--color-accent);
}
.pillar-h2 span {
	font-size:130%;
	font-weight:700;
}


/* ======================================================
	consulting - text - problem
====================================================== */
.pillar-problem-list {
	padding:0.3em 1em;
	backgrgound:#fff;
	border:1px solid var(--color-light);
	border-radius:0.3em;
}
.pillar-problem-list li {
	padding:0.6em 1em;
	color:var(--ink-2);
}
.pillar-problem-list li + li {
	border-top:1px dashed var(--color-light);
}
.pillar-problem-list li span {
	font-size:95%;
}
.pillar-problem-list li span:before {
	content:"Q.";
	padding-right:0.3em;
	font-weight:600;
	color:var(--color-accent);
	font-family:var(--fontFamily-serif);
}


/* ======================================================
	consulting - text - support
====================================================== */
.pillar-support-list {
	display:grid;
	grid-template-columns:repeat(2 ,1fr);
	gap:0.5em;
}
.pillar-support-list li {
	padding:0.5em 0.8em;
	color:var(--ink-2);
	backgrgound:#fff;
	border:1px solid var(--color-light);
	border-radius:0.3em;
}
.pillar-support-list li span {
	font-size:95%;
}
.pillar-support-list li span:before {
	content:"◆";
	padding-right:0.3em;
	color:var(--color-accent);
}


/* ======================================================
	consulting - text - example
====================================================== */
.pillar-example-panel {
	padding:1.5em;
	background:var(--color-pale);
	border-left:0.2em solid var(--color-accent);
}
.pillar-example-panel h3 {
	font-family:inherit;
}
.pillar-example-panel h3 span {
	font-size:110%;
	font-weight:600;
}
.pillar-example-panel p {
	padding-top:0.3em;
	line-height:1.8;
	color:var(--ink-2);
}
.pillar-example-panel p span {
	font-size:95%;
}

/* ======================================================
	consulting - photo
====================================================== */
.section-consulting .photo-panel {
	padding-top:7em;
}
.section-consulting .photo {
	width:100%;
	aspect-ratio:4/5;
	background:var(--bg-image) 50% 50% no-repeat;
	background-size:cover;
	border-radius:0.5em;
}
.section-consulting .photo .num {
	width:100%;
	height:100%;
	padding:1em 1.5em;
	line-height:1;
	letter-spacing:0;
	color:#fff;
	text-shadow:0 0 2em #666;
	background:rgba(0,51,34,0.2);
	border-radius:0.5em;
	font-family:var(--fontFamily-serif);
}
.section-consulting .photo .num span {
	font-size:500%;
	font-weight:700;
}



/* =================================================================================
	consulting - flow
================================================================================= */
.consulting-flow-list {
	padding:4em 2em 0;
	display:grid;
	grid-template-columns:repeat(4 ,1fr);
	gap:1em;
}
.consulting-flow-cell {
	padding:1.5em;
	background:var(--card2);
	border:1px solid var(--card2-border);
	border-radius:0.3em;
}
.consulting-flow-cell .num {
	line-height:1;
	color:var(--color-accent);
	font-family:var(--fontFamily-sansflex);
}
.consulting-flow-cell .num span {
	font-size:160%;
	font-weight:500;
}
.consulting-flow-cell h2 {
}
.consulting-flow-cell h2 span {
	font-size:140%;
	font-weight:700;
}
.consulting-flow-cell p {
	padding-top:0.6em;
	line-height:1.8;
}
.consulting-flow-cell p span {
	font-size:95%;
}

@media screen and (max-width:799px) { 
	.why-list {
		padding:3em 1em 0;
		grid-template-columns:1fr;
	}
}




/* ============================================================================================================
	about
============================================================================================================ */

/* =================================================================================
	about - values
================================================================================= */
.about-message-grid {
	padding:0 6em;
	display:grid;
	grid-template-columns:1fr 1.3fr;
	align-items:center;
	gap:4em;
}
.about-message-grid .text {
	order:2;
}

.about-message-grid .photo {
}
.about-message-grid .photo img {
	width:100%;
	aspect-ratio:3/4;
	object-fit:cover;
	border-radius:0.3em;
}



/* =================================================================================
	about - company
================================================================================= */
.company-table-panel {
	max-width:60em;
	margin:0 auto;
	padding:4em 2em 0;
}
.company-table {
	width:100%;
	background:#fff;
	border:1px solid var(--color-pale);
	border-radius:0.3em;
}
.company-table th ,
.company-table td {
	padding:1em 1.5em;
	line-height:1.8;
	text-align:left;
	border-bottom:1px solid var(--color-light);
}
.company-table th {
	width:12em;
	font-weight:600;
	color:var(--color-accent);
	background:var(--color-pale);
}
.company-table span {
	font-size:95%;
}



/* =================================================================================
	about - access
================================================================================= */
.access-grid.grid-2 {
	padding:4em 2em 0;
	align-items:stretch;
}
.access-info.consultant-value {
	padding:2em 3em;;
	line-height:1.6;
}
.access-info h3 {
}
.access-info h3 span {
	font-size:130%;
	font-weight:700;
}
.access-info p {
	color:var(--ink-3);
}
.access-info p span {
	font-size:90%;
	font-weight:500;
	font-family:var(--fontFamily-sansflex);
}

.access-list {
	padding-top:1em;
}
.access-list dt span {
	color:var(--color-accent);
	font-weight:600;
}
.access-list dd {
	padding-left:1em;
}
.access-list dd + dt {
	padding-top:0.6em;
}




/* ============================================================================================================
	recruit
============================================================================================================ */

/* =================================================================================
	recruit - job
================================================================================= */
.recruit-job-list .consulting-flow-cell .num span {
	font-size:150%;
}
.recruit-job-list .consulting-flow-cell h2 span {
	font-size:130%;
}
.recruit-job-list .consulting-flow-cell p {
	line-height:1.6;
	color:var(--ink-2);
}




/* =================================================================================
	recruit - message
================================================================================= */
.message-panel-frame {
	padding:4em 2em 0
}

.message-panel {
	padding:3em;
	background:var(--color-pale);
	border-left:0.4em solid var(--color-accent);
	border-radius:0.4em;
	box-shadow:0.3em 0.3em 1em var(--color-light);
}
.message-panel h2 span {
	font-size:180%;
	font-weight:600;
}

.message-panel .text {
	padding-top:1em;
	padding-left:2em;
	color:var(--ink-2);
}
.message-panel .text p + p {
	padding-top:0.3em;
}

.message-panel-inframe {
	margin-top:2em;
	padding:1em 2em;
	color:var(--ink-2);
	background:#fff;
	border-left:0.3em solid var(--color-accent);
	border-radius:0.3em;
	box-shadow:0.3em 0.3em 1em var(--color-light);
}



/* =================================================================================
	recruit - salaly
================================================================================= */
.salaly-list.re-flow-list {
}
.salaly-list.re-flow-list .re-flow-cell {
	padding:2em 0;
	text-align:center;
}
.salaly-list .re-flow-cell .sub span {
	font-size:90%;
}
.salaly-list .re-flow-cell .price {
	line-height:1.3;
}
.salaly-list .re-flow-cell .price .num {
	font-size:280%;
	font-weight:600;
	font-family:var(--fontFamily-sansflex);
}

.salaly-notes {
	padding:1em 3em 0;
	color:var(--ink-3);
}
.salaly-notes span {
	font-size:80%;
}




/* =================================================================================
	recruit - day-flow
================================================================================= */
.day-flow-list.re-flow-list {
	grid-template-columns:repeat(6 ,1fr);
}

.day-flow-list .re-flow-cell {
	padding:1.5em 0;
	text-align:center;
	border-color:var(--color-light);
}
.day-flow-list .re-flow-cell .sub span {
	font-size:130%;
	font-weight:600;
}
.day-flow-list .re-flow-cell h2 {
	padding-top:0.6em;
}
.day-flow-list .re-flow-cell h2 span {
	font-size:120%;
	font-weight:700;
}

.day-flow-list .re-flow-cell p span {
	font-size:90%;
}

@media screen and (min-width:800px) {
	.day-flow-list .re-flow-cell + .re-flow-cell {
		border-left:0 none;
	}
}



.want-panel.flex {
	gap:3em;
}

.want-panel .consultant-value {
	margin-top:2em;
	padding:1em 2em;
}
.want-panel .consultant-value p {
	color:var(--ink-2);
}
.want-panel .consultant-value p span {
	font-size:95%;
}

.want-panel .consultant-value p + p {
	padding-top:0.5em;
}

.want-recommended-panel {
	min-width:30em;
	padding:2em;
	background:var(--color-paleblue);
	border-left:0.3em solid var(--color-blue);
	border-radius:0.3em;
}
.want-recommended-panel h2 span {
	font-size:110%;
	font-weight:600;
}
.want-recommended-panel .re-value-list {
	padding-top:0.5em;
}
.want-recommended-panel .re-value-cell {
	border-bottom-color:var(--color-blue);
}

.want-recommended-panel .re-value-cell p:before {
	content:none;
}
.want-recommended-panel .re-value-cell p span:before {
	content:"\25C9";
	padding-right:0.3em;
	color:var(--color-blue);
}