@charset "UTF-8";

/* ------------------------------------------------------------
  PCスタイル
 ------------------------------------------------------------ */
@media screen and (min-width: 768px) {
	/* ページヘッダー */
	.pageStf_ttl {
		padding: 22px 48px;
	}
	.stfTtl_fig {
		width: 392px;
		height: 245px;
		position: absolute;
		left: -380px;
		bottom: -103px;
	}
	.stf_sec {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.stf_ttl {
		padding: 0;
	}
	.stf_ttl:after {
		content: "";
		display: block;
		width: calc( 2.5rem * 5.5 );
		height: 2.5rem;
		background: url('../img/company/fig_ttlunder_4char.svg') no-repeat left bottom / contain;
		position: absolute;
		left: -10px;
		bottom: -6px;
	}


	/* 代表挨拶 */
	.stf_grtg {
		width: 100%;
		margin: 100px 0 100px;
	}
	.stf_grtg figure {
		width: 600px;
		margin-top: 56px;
		position: relative;
	}
	.stf_grtg figcaption {
		writing-mode: vertical-rl;
		line-height: 1.2;
		position: absolute;
		top: -25px;
		right: 50px;
	}
	.stf_grtg figcaption span {
		display: inline-block;
		background: #fff;
	}
	.char25 {
		font-size: 1.5625rem; /* 25px */
		font-weight: 500;
		margin-left: 5px;
	}
	.char14 {
		font-size: 0.875rem; /* 14px */
	}
	.char18 {
		font-size: 18px; /* 18px */
	}
	.stfGrtg_mainTxt {
		width: 600px;
		margin-top: 40px;
	}


	/* スタッフ */
	.stf_intro {
		width: 100%;
		padding: 100px 0 50px;
		border-radius: 100px 100px 0 0;
		background: #f4f4f4;
	}
	ul.stf_list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 1010px;
		margin-top: 260px;
	}
	li.stf_card {
		width: 480px;
		padding: 0 20px;
		background: #fff;
		border-radius: 20px;
	}
	li.stf_card:nth-child(n+3) {
		margin-top: 220px;
	}
	li.stf_card article {
		width: 100%;
		padding: 165px 40px 40px;
		position: relative;
	}
	div.stfCard_header {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		position: absolute;
		top: -142px;
		left: 50%;
		transform: translate(-50%, 0);
	}
	div.stfCard_header h4 {
		order: 2;
		margin-top: 10px;
		font-size: 2.1875rem; /* 35px */
		font-weight: 500;

	}
	div.stfCard_header figure {
		order: 1;
	}
	.stfCard_item {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 12px 24px;
		margin-top: 30px;
	}
	.stfCard_item dt:last-of-type,
	.stfCard_item dt:last-of-type + dd {
		grid-column: 1 / 3; /* 1番目から3番目の線の間（＝2列分）を占有 */
	}
	.stfCard_item dt:last-of-type {
		margin-bottom: -8px; /* gapがあるので、お好みで調整 */
	}
	.tantokui span {
		display: inline-block;
		padding: 0 4px;
		background: #1AAD6B;
		border-radius: 4px;
		font-size: 0.875rem; /* 14px */ 
		font-weight: 700;
		color: #fff;
		line-height: 1.5;
	}
	.tantokui span:not(:last-child) {
		margin-right: 5px;
	}
}


/* ------------------------------------------------------------
  SPスタイル
 ------------------------------------------------------------ */
@media screen and (max-width: 767px) {

	/* ページヘッダー・イラスト */
	.stfTtl_fig {
		width: 320px;
		height: 200px;
		position: absolute;
		right: 0;
		bottom: -150px;
		left: 0;
		margin: 0 auto;
	}

	/* セクション共通 */
	.stf_sec {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	/* 代表挨拶 */
	.stf_grtgTtl {
		position: relative;
		padding-top: 50px;
	}
	.stf_grtgTtl:after {
		content: "";
		display: block;
		width: calc( 2.375rem * 4.8 );
		height: 2.5rem;
		background: url('../img/landlord/fig_ttlunder_4char.svg') no-repeat left bottom / contain;
		position: absolute;
		left: -10px;
		bottom: -8px;
	}
	.stf_grtg figure,
	.stf_grtg figure img {
		width: 100% !important;
	}
	.stf_grtg figure {
		margin-top: 50px;
		position: relative;
	}
	.stf_grtg figcaption {
		writing-mode: vertical-rl;
		position: absolute;
		top: -25px;
		right: 35px;
	}
	.stf_grtg figcaption span {
		display: inline-block;
		background: #fff;
		line-height: 1.2;
	}
	.char25 {
		font-size: 22px; /* 25px */
		font-weight: 500;
		margin-left: 5px;
	}
	.char14 {
		font-size: 0.875rem; /* 14px */
	}
	.char18 {
		font-size: 18px; /* 18px */
	}
	.stfGrtg_mainTxt {
		padding: 0 24px;
		margin-top: 1rem;
		text-align: justify;
	}

	/* スタッフ */
	.stf_intro {
		padding: 50px 0 0;
		margin-top: 50px;
		border-radius: 50px 50px 0 0;
		background: #F4F4F4;
	}
	.stf_introTtl:after {
		content: "";
		display: block;
		width: calc( 2.375rem * 4.8 );
		height: 2.5rem;
		background: url('../img/landlord/fig_ttlunder_4char.svg') no-repeat left bottom / contain;
		position: absolute;
		left: -10px;
		bottom: 0;
	}
	ul.stf_list {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin: 0;
	}
	li.stf_card {
		width: 100%;
		background: #fff;
		border-radius: 20px;
	}
	li.stf_card:first-child {
		margin-top: 140px;
	}
	li.stf_card:not(:first-child) {
		margin-top: 160px;
	}
	li.stf_card article {
		width: 100%;
		padding: 110px 40px 40px;
		position: relative;
	}
	div.stfCard_header {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		position: absolute;
		top: -142px;
		left: 50%;
		transform: translate(-50%, 0);
	}
	div.stfCard_header h4 {
		order: 2;
		font-size: 2.1875rem; /* 35px */
		font-weight: 500;

	}
	div.stfCard_header figure {
		order: 1;
	}
	.stfCard_item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 30px;
	}
	.stfCard_item dt {
		margin-top: 16px;
	}
	.tantokui span {
		display: inline-block;
		padding: 0 4px;
		background: #1AAD6B;
		border-radius: 4px;
		font-size: 0.875rem; /* 14px */
		font-weight: 700;
		color: #fff;
		line-height: 1.5;
	}
	.tantokui span:not(:last-child) {
		margin-right: 5px;
	}

	/* リンクボタン */
	.contact_links {
		padding: 70px 0;
		background: #F4F4F4;
		margin: 0;
	}
}