/* ==========================================================
   GLOBAL / LAYOUT
   ========================================================== */

.footer-area {
	padding-bottom: 100px;
}

.copyright-block p {
	text-align: center;
	font-size: 14px;
}


/* ==========================================================
   HERO
   ========================================================== */

.hero {
	width: 100%;
	aspect-ratio: 16 / 6;
	min-height: 180px;
	max-height: 400px;
	overflow: hidden;
}

.hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==========================================================
   GLOBAL NAVIGATION
   ========================================================== */

.header-block .header__navi li {
	margin-right: 20px;
	font-size: 15px;
}


/* ==========================================================
   COMPANY / CAREER
   ========================================================== */

.company {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px;
}

.company-info .row,
.career .row {
	display: flex;
	border-bottom: 1px solid #ddd;
	padding: 16px 0;
}

.company-info dt,
.career dt {
	width: 220px;
	font-weight: 600;
}

.company-info dd,
.career dd {
	flex: 1;
	margin: 0;
}

@media (max-width: 768px) {

	.company-info .row,
	.career .row {
		flex-direction: column;
	}

	.company-info dt,
	.career dt {
		width: 100%;
		margin-bottom: 4px;
	}
}


/* ==========================================================
   BLOG / CONTENTS
   ========================================================== */

.mt-be-columns {
	display: flex;
	justify-content: center;
	gap: 32px;
}

.contents p {
	margin-bottom: 40px;
}

.contents .button {
	background: #fff;
}

@media screen and (max-width: 767px) {
	.mt-be-columns {
		gap: 16px;
	}

	.contents p {
		margin-bottom: 16px;
	}
}


/* ==========================================================
   NEWS BLOCK (TOP PAGE)
   ========================================================== */

.block-news__thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f2f2f2;
	margin-bottom: 1rem;
}

.block-news__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

h3.block-news__title {
	margin-top: 0;
}

.block-news__button {
	margin-top: 2rem;
}


/* ==========================================================
   PROJECT TABLE
   ========================================================== */

/* ── Structure ── */
.project-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.project-table .col-num {
	width: 52px;
}

.project-table .col-name {
	width: 54%;
}

.project-table .col-media {
	width: 17%;
}

.project-table .col-architect {
	width: 29%;
}

/* ── Border ── */
.contents table {
	border: 0.5px solid #e8e6e0;
}

/* ── Header ── */
.contents table th {
	background-color: #2d2d2d;
}

.project-table thead th {
	/* font-family: 'DM Sans', sans-serif; */
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.35em;
	color: #e2e0e0;
	text-align: left;
	padding: .5em 1em;
	text-transform: uppercase;
	border-bottom: 0.5px solid #e8e6e0;
}

/* ── Body rows ── */
.project-table tbody tr:last-child {
	border-bottom: 0.5px solid #e8e6e0;
}

.project-table tbody td {
	padding: .75em 16px;
	vertical-align: top;
	border-bottom: 0.5px solid #e8e6e0;
}

/* ── Columns ── */
.col-name {
	/* font-family: 'Cormorant Garamond', Georgia, serif; */
	font-size: 19px;
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: #111;
	padding-right: 28px;
	transition: color 0.2s ease, letter-spacing 0.28s ease;
	word-break: keep-all;
}

.col-media {
	/* font-family: 'DM Sans', sans-serif; */
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: #333;
	letter-spacing: 0.04em;
	transition: color 0.2s ease;
}

.col-architect {
	/* font-family: 'DM Sans', sans-serif; */
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: #999;
	letter-spacing: 0.04em;
	transition: color 0.2s ease;
}

.col-architect a {
	transition: color 0.2s ease;
	color: #c8a84b;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-align: left;

	&:hover {
		cursor: pointer;
		color: #a88a30;

	}
}

.col-architect-icon {
	display: flex;
	align-items: center;

	svg {
		margin-left: 8px;
		min-width: 20px;
	}
}

/* ── SP (max-width: 768px) ── */
@media (max-width: 768px) {
	.project-table thead {
		display: none;
	}

	.project-table,
	.project-table tbody {
		display: block !important;
		width: 100% !important;
	}

	.project-table tbody tr {
		display: grid;
		grid-template-columns: 24px 1fr 1fr;
		grid-template-rows: auto auto;
		column-gap: 10px;
		row-gap: 0;
		align-items: baseline;
		padding: 12px 0 !important;
		border-bottom: 0.5px solid #e8e6e0;
	}

	.project-table tbody td {
		display: block !important;
		height: auto !important;
		border: none !important;
		padding: 0 !important;
		width: auto !important;
	}

	/* ホバー無効 */
	.project-table tbody tr:hover td,
	.project-table tbody:has(tr:hover) tr:not(:hover) td {
		background: transparent !important;
		opacity: 1 !important;
	}

	/* 番号: 左端・2行縦中央 */
	.col-num {
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: center;
		font-size: 10px;
		color: #555 !important;
	}

	/* 建物名: 1行目 */
	.col-name {
		grid-column: 2 / 4;
		grid-row: 1;
		font-size: 15px !important;
		color: #111 !important;
		letter-spacing: 0.02em !important;
		padding-right: 0 !important;
		line-height: 1.3;
	}

	/* 掲載誌: 2行目・左 */
	.col-media {
		grid-column: 2;
		grid-row: 2;
		font-size: 10px !important;
		color: #555 !important;
		padding-right: 0 !important;
		margin-top: 3px;
	}

	/* 建築設計: 2行目・右寄せ */
	.col-architect {
		grid-column: 3;
		grid-row: 2;
		font-size: 10px !important;
		color: #555 !important;
		text-align: right;
		margin-top: 3px;
	}

	/* 竣工年・矢印は非表示 */
	.col-year {
		display: none !important;
	}

	/* SPサイズで実績表を7件にする */
	.project-table tbody tr:nth-child(n+8) {
		display: none;
	}

	.project-table tbody tr:nth-child(7) {
		border-bottom: none;
	}
}

.access-map {
	width: 100%;
}

.access-map iframe {
	display: block;
	width: 100% !important;
	height: 450px !important;
	border: 0;
}

.btn-works {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 32px;
	letter-spacing: 0.12em;
	color: #333 !important;
	background: transparent;
	border: 1px solid #333;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	text-decoration: none !important;

	&::hover {
		background: #333;
		opacity: initial !important;
		color: #fff !important;
	}
}

.btn-works .arrow {
	font-size: 14px;
	transition: transform 0.2s;
}

.btn-works:hover .arrow {
	transform: translateX(6px);
}

.btn-wrap {
	display: flex;
	justify-content: center;
}

/* heroテキスト */
.inner-wrap__hero {
	p {
		max-width: 61em;
	}
}

/* フォーム */
label {
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"] {
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.contents h1 {
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}