@charset "UTF-8";
@import url("reset.css");
@import url("common01.css?v=20261020"); /* 更新時は日付を変えてブラウザのキャッシュを更新 */

/* ======================================================
   基本設定（色・ページ共通）
   ====================================================== */
:root {
	--blue: #00388d;
	--deep: #062b65;
	--red: #e60020;
	--yellow: #ffcf00;
	--ink: #24354a;
	--pale: #f1f6fb;
	--line: #dce5ee;
}
.company-page {
	color: var(--ink);
	font-family: "Noto Sans JP", "游ゴシック", sans-serif;
}
.company-page main * {
	box-sizing: border-box;
}
.company-page main {
	font-size: 15px;
	line-height: 2;
	text-align: left;
}
.company-page main img {
	display: block;
	max-width: 100%;
}
.company-page main a {
	color: inherit;
	text-decoration: none;
}
.company-page a:focus-visible,
.company-page button:focus-visible {
	outline: 3px solid #e60020;
	outline-offset: 5px;
}
.company-page section[id] {
	scroll-margin-top: 125px;
}
.company-wrap {
	width: calc(100% - 96px);
	max-width: 1120px;
	margin: auto;
}

.company-page .skip-link {
	position: fixed;
	left: 15px;
	top: -100px;
	background: white;
	padding: 10px;
	z-index: 2000;
}
.company-page .skip-link:focus {
	top: 10px;
}

/* ======================================================
   ページタイトル（COMPANY 会社情報）
   ====================================================== */
.company-hero {
	position: relative;
	background: var(--blue);
	color: #fff;
	min-height: 290px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.company-hero:after {
	content: "";
	position: absolute;
	width: 480px;
	height: 480px;
	right: 7%;
	top: -170px;
	border: 1px solid #ffffff25;
	transform: rotate(35deg);
	box-shadow: 80px 70px 0 #ffffff05;
}
.hero-inner {
	width: calc(100% - 96px);
	max-width: 1120px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	padding: 50px 0;
}
.eyebrow {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--blue);
	line-height: 1.5;
	margin: 0 0 20px;
}
.company-hero .eyebrow {
	color: #c5d6ef;
	font-size: 11px;
	margin-bottom: 10px;
}
.company-hero .hero-title {
	font-family: Arial, sans-serif;
	font-size: 76px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: 0.035em;
}
.company-hero .hero-title span {
	font-family: "Noto Sans JP", sans-serif;
	display: block;
	font-size: 17px;
	letter-spacing: 0.15em;
	font-weight: 500;
	margin-top: 20px;
}
.brand-bars {
	display: flex;
	gap: 5px;
	margin-top: 25px;
}
.brand-bars i {
	width: 28px;
	height: 5px;
	background: #fff;
}
.brand-bars i:nth-child(2) {
	background: var(--red);
}
.brand-bars i:nth-child(3) {
	background: var(--yellow);
}
.hero-side {
	position: absolute;
	right: 6%;
	bottom: 42px;
	letter-spacing: 0.15em;
	font-size: 12px;
	color: #dfe9f6;
}

/* ======================================================
   ページ内メニュー
   ====================================================== */
.company-page .company-anchor {
	position: static;
	width: 100%;
	height: auto;
	background: #fff;
	padding: 0;
	margin: 25px 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--line);
	overflow: visible;
	z-index: auto;
}
.company-anchor a {
	font-size: 13px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 19px 24px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.company-anchor a:nth-child(3n) {
	border-right: 0;
}
.company-anchor a:nth-child(n + 4) {
	border-bottom: 0;
}
.company-anchor a:hover {
	background: var(--pale);
}
.company-anchor span {
	color: var(--blue);
}

/* ======================================================
   柴田住建について
   ====================================================== */
.about-section {
	padding-top: 100px;
	padding-bottom: 105px;
}
.intro-heading {
	font-size: 40px;
	line-height: 1.65;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-bottom: 38px;
	color: var(--deep);
}
.intro-layout {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 55px;
	align-items: center;
}
.intro-copy {
	line-height: 2.2;
	font-size: 14px;
}
.milestones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 30px 0;
}
.milestones > div + div {
	border-left: 1px solid var(--line);
	padding-left: 24px;
}
.stat-label {
	font-size: 12px;
	display: block;
	color: var(--blue);
	font-weight: 600;
}
.milestones strong {
	font-family: Arial, sans-serif;
	display: block;
	font-size: 66px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--blue);
	white-space: nowrap;
	letter-spacing: -0.04em;
}
.milestones strong span {
	font-family: inherit;
	font-size: 17px;
	margin-left: 5px;
	letter-spacing: 0;
}
.milestones > div:first-child strong {
	font-size: 90px;
	line-height: 1.1;
	margin: 8px 0;
}
.milestones small {
	font-size: 10px;
	color: #6b7786;
}

/* ======================================================
   代表メッセージ
   ====================================================== */
.message-section {
	background: var(--pale);
	padding: 95px 0 100px;
}
.message-layout {
	max-width: 1440px;
	margin: auto;
}
/* 見出し（カードの外・カードの左端に揃える） */
.message-head {
	position: relative;
	margin: 0 0 32px calc((100% - 1120px) / 2);
	padding-left: 24px;
}
.message-head:before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 5px;
	height: calc(100% - 12px);
	background: var(--yellow);
}
.message-head .eyebrow {
	font-size: 30px;
	letter-spacing: 0.02em;
	margin-bottom: 18px;
}
.message-head h2 {
	font-size: 27px;
	font-weight: 600;
	line-height: 1.7;
}
/* PC・タブレットでは見出しを1行で表示（スマホのみ改行） */
@media (min-width: 768px) {
	.message-head h2 br {
		display: none;
	}
}
/* 写真とカード：写真の下端をカードの下端より75px上に揃える */
.message-body {
	position: relative;
	min-height: calc(535px + 75px);
}
.message-layout figure {
	position: absolute;
	right: 0;
	bottom: 75px;
	z-index: 2;
	width: 50%;
	margin: 0;
}
.message-layout figure img {
	width: 100%;
	height: 535px;
	object-fit: cover;
	object-position: 40% center;
}
.message-layout figcaption {
	position: absolute;
	top: 100%;
	right: 22px;
	margin-top: 8px;
	text-align: right;
	font-size: 10px;
	color: #60738b;
}
.message-panel {
	position: relative;
	background: white;
	width: 50%;
	margin-left: calc((100% - 1120px) / 2);
	padding: 50px 55px;
	box-shadow: 0 10px 40px #00338806;
	z-index: 1;
}
.message-panel p:not(.signature) {
	font-size: 13px;
	line-height: 2.2;
	margin-bottom: 19px;
}
.signature {
	text-align: right;
	margin-top: 30px;
	font-size: 12px;
}
.signature span {
	font-size: 11px;
	margin-right: 12px;
}

/* ======================================================
   セクション見出し（共通）
   ====================================================== */
.section-heading {
	margin-bottom: 40px;
}
.section-heading > p {
	font:
		700 34px/1.2 Arial,
		sans-serif;
	color: var(--blue);
	letter-spacing: 0.025em;
	margin-bottom: 12px;
}
.section-heading h2 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.8;
}
.section-heading:after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background: var(--yellow);
	margin-top: 20px;
}
.centered {
	text-align: center;
}
.centered:after {
	margin-left: auto;
	margin-right: auto;
}
/* 見出し下の黄色の罫線：太さは他と同じ3px、長さはh2の横幅に合わせる（.is-fit-line を付けた見出し） */
.section-heading.is-fit-line:after {
	display: none;
}
.section-heading.is-fit-line h2 {
	display: inline-block;
}
.section-heading.is-fit-line h2:after {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background: var(--yellow);
	margin-top: 20px;
}

/* ======================================================
   住まいづくりの考え方（OUR APPROACH）
   ====================================================== */
.values-section {
	padding-top: 100px;
	padding-bottom: 95px;
}
.values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.values-grid article {
	border-top: 1px solid var(--line);
	padding-top: 22px;
}
.values-grid article > span {
	font: 500 17px Arial;
	color: var(--red);
}
.values-grid h3 {
	font-size: 23px;
	line-height: 1.65;
	margin: 22px 0 18px;
	font-weight: 600;
}
.values-grid p {
	font-size: 13px;
	line-height: 2.1;
}
.text-link {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid var(--blue);
	padding: 15px 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--blue) !important;
}
.text-link span {
	color: var(--red);
}
.values-section > .text-link {
	max-width: 310px;
	margin: 35px 0 0 auto;
}
.text-link:hover {
	background: #f4f7fb;
}

/* ======================================================
   住宅性能（QUALITY）
   ====================================================== */
.quality-section {
	background: var(--blue);
	color: white;
	padding: 70px 0;
}
.quality-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}
.quality-head .section-heading > p {
	color: white;
}
.quality-head > p {
	font-size: 12px;
	line-height: 2;
}
/* タブレット幅では見出しが1行に収まらないため、スマホと同じ位置で改行する */
@media (min-width: 768px) and (max-width: 1023px) {
	.quality-head .section-heading br.sp-only {
		display: inline;
	}
}
.quality-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid #ffffff50;
	border-bottom: 1px solid #ffffff50;
	padding: 25px 0;
}
.quality-grid > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-right: 1px solid #ffffff50;
}
.quality-grid > div > h3,
.quality-value {
	margin-top: auto;
}
.quality-value {
	text-align: left;
}
/* 「最高等級」「ZEH水準」「火災保険料が約半額」：項目名（12px）の1.3倍 */
.quality-grade {
	font-size: 15.6px;
	line-height: 1.4;
	font-weight: 500;
}
.quality-grid > div:last-child {
	border: 0;
}
.quality-grid span {
	font-size: 12px;
	color: #d4e1f5;
}
.quality-grid h3 {
	font-size: 22px;
	font-weight: 500;
	line-height: 48px; /* 数字（34px）の有無で行の高さが変わらないよう固定 */
}
.quality-grid b {
	font-size: 34px;
	font-weight: 500;
	line-height: 1;
}
.note {
	font-size: 11px;
	line-height: 1.9;
	margin-top: 20px;
	color: #d8e6f7;
}
/* 住宅性能の注釈（※1〜※3） */
.quality-grade .note-mark {
	margin-left: 2px;
	font-size: 11px;
	color: inherit;
	vertical-align: super;
	line-height: 0;
}
.quality-notes {
	margin-top: 20px;
	list-style: none;
}
.quality-notes li {
	padding-left: 1.9em;
	text-indent: -1.9em;
	font-size: 11px;
	line-height: 1.9;
	color: #d8e6f7;
}
.quality-notes + .note {
	margin-top: 10px;
}

/* ======================================================
   会社概要（OUTLINE）
   ====================================================== */
.outline-section {
	padding-top: 100px;
	padding-bottom: 110px;
}
.outline-list {
	max-width: 950px;
	margin: auto;
	border-top: 1px solid var(--line);
}
.outline-list > div {
	display: grid;
	grid-template-columns: 210px 1fr;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	line-height: 2;
	padding: 22px 18px;
}
.outline-list dt {
	font-weight: 600;
	color: var(--deep);
}
.outline-list dd {
	margin: 0;
}
.outline-list strong {
	font-weight: 700;
	color: var(--blue);
}

/* ======================================================
   事業エリア（OUR AREA）
   ====================================================== */
.area-section {
	background: var(--pale);
	padding: 85px 0;
}
.area-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 90px;
}
.area-layout .section-heading h2 {
	font-size: 31px;
}
.area-layout p {
	font-size: 13px;
}
.area-note {
	margin-top: 20px;
	color: #5d6e82;
	font-size: 11px !important;
}
.area-details h3 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
}
.area-details > div {
	position: relative;
	padding: 24px 0 12px;
	border-top: 1px solid #cbd8e8;
}
.area-details > div > span {
	position: absolute;
	top: 28px;
	right: 0;
	font: 500 16px Arial;
	color: #8197b2;
	letter-spacing: 0.1em;
}
.area-details h4 {
	font-size: 23px;
	color: var(--blue);
	margin-bottom: 12px;
}
.area-details .text-link {
	border-bottom: 0;
}

/* ======================================================
   拠点・アクセス（ACCESS）
   ====================================================== */
.access-section {
	padding-top: 100px;
	padding-bottom: 95px;
}
.office-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	margin-top: 40px;
}
.office-grid article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 44%;
	gap: 22px;
	align-items: stretch;
}
.office-text {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-left: 52px;
}
/* 写真はトリミングせず元の比率で表示し、下端を「Googleマップで開く」の罫線にそろえる */
.office-photo {
	align-self: end;
	margin: 0;
}
.office-photo img {
	display: block;
	width: 100%;
	height: auto;
}
.office-number {
	position: absolute;
	left: 0;
	top: 0;
	font: 500 23px Arial;
	color: var(--red);
}
.office-grid h3 {
	font-size: 23px;
	font-weight: 600;
	margin-bottom: 12px;
}
.office-grid p {
	font-size: 13px;
	line-height: 2;
	margin-bottom: 12px;
}
.office-grid .office-number {
	font-size: 23px;
}
.office-grid p:last-of-type {
	margin-bottom: 30px;
}
.office-grid .text-link {
	margin-top: auto;
}

/* 2列だと案内文が4行に折り返す幅（1260px以下）では1列にする */
@media (max-width: 1260px) {
	.office-grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	.office-grid article {
		grid-template-columns: minmax(0, 1fr) min(44%, 380px);
	}
}

/* ======================================================
   沿革（HISTORY）
   ======================================================*/
.history-section {
	background: var(--pale);
	padding: 85px 0;
}
.history-list {
	max-width: 760px;
	margin: 45px auto 0;
	list-style: none;
}
.history-list li {
	display: grid;
	grid-template-columns: 150px 1fr;
	position: relative;
	gap: 35px;
	padding: 0 0 35px;
}
.history-list time {
	font: 500 30px Arial;
	color: var(--blue);
}
.history-list time span {
	display: block;
	font-size: 12px;
	margin-top: 7px;
	letter-spacing: 0.1em;
}
.history-list li > div {
	position: relative;
	border-left: 1px solid #b8cce4;
	padding-left: 35px;
	padding-bottom: 15px;
}
.history-list li > div:before {
	content: "";
	position: absolute;
	left: -5px;
	top: 9px;
	background: var(--blue);
	width: 9px;
	height: 9px;
	border-radius: 50%;
}
.history-list h3 {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 10px;
}
.history-list p {
	font-size: 12px;
}
.history-list .future > div:before {
	background: var(--red);
}
.history-list li:last-child {
	padding-bottom: 0;
}

/* ======================================================
   お問い合わせ（CONTACT）
   ====================================================== */
.company-contact {
	padding: 65px 0;
	background: #fff5cc;
}
.company-contact > .company-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 45px;
}
.company-contact h2 {
	/* 1024px幅でも1行目（「…売却など」）が1行に収まる大きさ（最大27px） */
	font-size: clamp(18px, calc((100vw - 530px) / 23.5), 27px);
	line-height: 1.7;
	font-weight: 600;
}
.company-contact .eyebrow {
	margin-bottom: 12px;
}
.company-contact a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 25px 30px;
	background: var(--red);
	color: white !important;
	font-size: 14px;
	min-width: 390px;
}
.company-contact a:hover {
	background: #ba001b;
}

/* ======================================================
   レスポンシブ（画面幅ごとの調整）
   ====================================================== */
@media (min-width: 768px) {
	.company-page main {
		padding-top: 98px;
	}
}
@media (max-width: 1200px) {
	.message-head {
		margin-left: 4%;
	}
	.message-panel {
		margin-left: 4%;
		width: calc(46% + 40px);
		padding: 35px 75px 35px 35px;
	}
	.milestones strong {
		font-size: 52px;
	}
	.milestones strong span {
		font-size: 14px;
	}
	.intro-layout {
		gap: 30px;
	}
}
@media (max-width: 767px) {
	.company-wrap,
	.hero-inner {
		width: calc(100% - 40px);
	}
	.company-page main {
		font-size: 14px;
	}
	.company-hero {
		min-height: 220px;
	}
	.hero-inner {
		padding: 35px 0;
	}
	.company-hero .hero-title {
		font-size: 48px;
	}
	.company-hero .hero-title span {
		font-size: 14px;
	}
	.hero-side {
		display: none;
	}
	.company-page .company-anchor {
		grid-template-columns: 1fr 1fr;
		margin-top: 10px;
	}
	.company-anchor a {
		font-size: 11px;
		padding: 15px 12px;
	}
	.company-anchor a:nth-child(3n) {
		border-right: 1px solid var(--line);
	}
	.company-anchor a:nth-child(2n) {
		border-right: 0;
	}
	.company-anchor a:nth-child(4) {
		border-bottom: 1px solid var(--line);
	}
	.about-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.intro-heading {
		font-size: 27px;
		letter-spacing: 0.02em;
		margin-bottom: 25px;
	}
	.intro-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.intro-copy {
		font-size: 13px;
	}
	.milestones {
		gap: 16px;
		padding: 24px 0;
	}
	.milestones > div + div {
		padding-left: 16px;
	}
	.milestones strong {
		font-size: 49px;
	}
	.milestones strong span {
		font-size: 13px;
	}
	.milestones > div:first-child strong {
		font-size: 70px;
	}
	.stat-label {
		font-size: 11px;
	}
	.milestones small {
		font-size: 9px;
	}
	.message-section {
		padding: 45px 0 55px;
	}
	.message-head {
		margin: 0 20px 22px;
		padding-left: 18px;
	}
	.message-body {
		min-height: 0;
	}
	.message-layout figure {
		position: relative;
		bottom: auto;
		width: calc(100% - 20px);
		margin-left: 20px;
	}
	.message-layout figure img {
		height: 270px;
		object-position: 25% center;
	}
	.message-layout figcaption {
		position: static;
		margin: 4px 15px;
	}
	.message-panel {
		width: calc(100% - 40px);
		margin: -24px auto 0;
		padding: 32px 24px;
	}
	.message-head .eyebrow {
		font-size: 25px;
	}
	.message-head h2 {
		font-size: 23px;
	}
	.message-panel p:not(.signature) {
		font-size: 13px;
	}
	.section-heading > p {
		font-size: 29px;
	}
	.section-heading h2 {
		font-size: 18px;
	}
	.values-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.values-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.values-grid article {
		position: relative;
		padding: 20px 0 0 40px;
	}
	.values-grid article > span {
		position: absolute;
		left: 0;
		top: 24px;
	}
	.values-grid h3 {
		font-size: 21px;
		margin: 0 0 15px;
	}
	.values-section > .text-link {
		max-width: none;
	}
	.quality-section {
		padding: 50px 0;
	}
	.quality-head {
		display: block;
	}
	.quality-head .section-heading {
		margin-bottom: 18px;
	}
	.quality-head > p {
		margin-bottom: 25px;
	}
	.quality-grid {
		grid-template-columns: 1fr;
		padding: 0;
	}
	.quality-grid > div {
		border-right: 0;
		border-bottom: 1px solid #ffffff40;
		padding: 18px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.quality-grid > div > h3,
	.quality-value {
		margin-top: 0;
	}
	.quality-grid h3 {
		font-size: 21px;
		line-height: 40px;
	}
	.quality-grid b {
		font-size: 27px;
	}
	.outline-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.outline-list > div {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 18px 4px;
	}
	.outline-list dt {
		font-size: 12px;
	}
	.outline-list dd {
		font-size: 13px;
		overflow-wrap: anywhere;
	}
	.area-section {
		padding: 55px 0;
	}
	.area-layout {
		grid-template-columns: 1fr;
		gap: 35px;
	}
	.area-layout .section-heading h2 {
		/* 「大阪府・奈良県内全域に対応。」（14文字）が画面幅に1行で収まる大きさ（最大27px） */
		font-size: min(27px, calc((100vw - 40px) / 14.5));
	}
	.area-layout .section-heading {
		margin-bottom: 25px;
	}
	.access-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.office-grid {
		grid-template-columns: 1fr;
		gap: 35px;
	}
	.office-grid article {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.office-text {
		padding-left: 40px;
	}
	.office-photo {
		align-self: auto;
	}
	.office-grid h3 {
		font-size: 21px;
	}
	.history-section {
		padding: 55px 0;
	}
	.history-list li {
		grid-template-columns: 85px 1fr;
		gap: 15px;
	}
	.history-list li > div {
		padding-left: 20px;
	}
	.history-list time {
		font-size: 26px;
	}
	.history-list h3 {
		font-size: 15px;
	}
	.history-list p {
		font-size: 12px;
	}
	.company-contact {
		padding: 45px 0;
	}
	.company-contact > .company-wrap {
		display: block;
	}
	.company-contact h2 {
		font-size: 22px; /* 320px幅で3行に収まる大きさ */
	}
	.company-contact a {
		min-width: 0;
		margin-top: 25px;
		padding: 20px 16px;
		font-size: 12px;
	}
	.company-page section[id] {
		scroll-margin-top: 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}
@media (min-width: 640px) {
}
@media (max-width: 359px) {
	.company-hero .hero-title {
		font-size: 40px;
	}
	.milestones strong {
		font-size: 39px;
	}
	.milestones strong span {
		font-size: 11px;
	}
	.intro-heading {
		font-size: 24px;
	}
}

/* ===== 拠点マップ：Googleマップ埋め込み（APIなし）を黄色の背景に80%で重ね、ロゴ付きピンを配置 ===== */
.map-frame {
	position: relative;
}
#office-map {
	position: relative;
	height: 500px;
	width: 100%;
	overflow: hidden;
	background: var(--yellow);
}
#office-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	opacity: 0.8;
	pointer-events: none;
}
.office-marker {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	transform: translate(-50%, calc(-100% - 11px));
	text-decoration: none;
}
.office-marker .marker-badge {
	position: relative;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	border: 3px solid var(--blue);
}
.office-marker.secondary .marker-badge {
	border-color: var(--red);
}
.office-marker .marker-badge:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -11px;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top: 10px solid var(--blue);
	border-bottom: 0;
}
.office-marker.secondary .marker-badge:after {
	border-top-color: var(--red);
}
.office-marker .marker-badge img {
	width: 30px;
	height: auto;
	display: block;
}
.office-marker .marker-badge b {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 26px;
	height: 26px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: var(--blue);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.office-marker.secondary .marker-badge b {
	background: var(--red);
}
.office-marker .marker-name {
	order: -1;
	background: #fff;
	color: var(--blue);
	font-weight: 700;
	font-size: 13px;
	padding: 5px 10px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.office-marker.secondary .marker-name {
	color: var(--red);
}
.office-marker:hover .marker-badge,
.office-marker:focus-visible .marker-badge {
	transform: scale(1.06);
}
.office-marker:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 4px;
}
@media (max-width: 767px) {
	#office-map {
		height: 380px;
	}
	.office-marker .marker-badge {
		width: 52px;
		height: 52px;
	}
	.office-marker .marker-badge img {
		width: 25px;
	}
	.office-marker .marker-name {
		font-size: 11px;
		padding: 4px 8px;
	}
}
/* 埋め込み地図の「マップで開く」（操作不可のため）を白帯の案内文で隠す */
.map-caption {
	position: absolute;
	z-index: 3;
	top: 8px;
	left: 8px;
	min-width: 150px;
	min-height: 42px;
	max-width: calc(100% - 16px);
	margin: 0;
	padding: 11px 16px;
	background: #fff;
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
@media (max-width: 767px) {
	.map-caption {
		font-size: 12px;
		padding: 9px 12px;
	}
}

/* 見出しの改行位置：狭い画面では「より良い／街と暮らしを願った／街づくり・家づくり」の3行 */
.intro-heading .nowrap {
	display: inline-block;
	white-space: nowrap;
	font-weight: inherit;
}

/* パンくず（共通部品 include/breadcrumb.php） */
.company-page .breadcrumb {
	padding: 16px 0;
}

/* 代表メッセージ：写真をカードの前面に表示（カードの文字が隠れないよう、重なりはカード右側の余白内に収める） */
@media (min-width: 1201px) {
	.message-panel {
		width: calc(50% - (100% - 1120px) / 2 + 40px);
		padding-right: 95px;
	}
}

/* スマホのみ改行する <br class="sp-only"> */
@media (min-width: 768px) {
	.company-page br.sp-only {
		display: none;
	}
}
/* PC・タブレットのみ改行する <br class="pc-only"> */
@media (max-width: 767px) {
	.company-page br.pc-only {
		display: none;
	}
}