/*
Theme Name:GRAVITY child
Theme URI:https://tcd-theme.com/tcd111
Description:WordPressテーマ「GRAVITY」の子テーマ
Template:gravity_tcd111
Author:TCD
Author URI:https://tcd-theme.com/
Version:3.4.
*/

/*
  ここから下にCSSを追記してください。
*/

/* ローディングアニメーション */
.c-preloader__after img {
	width: 20rem;
	height: auto;
}

/* 固定ページ共通ヘッダー */
.c-main-title {
	padding-bottom: calc(50px + var(--tcd-half-read));
	border-top: 2px solid var(--tcd-accent-color);
	color: #333333;
	font-family: var(--tcdce-opt-font-type-serif);
	background: url(https://takara-realestate.com/wp-content/uploads/背景_見出し共通.jpg) center center / cover no-repeat;
}

/* トップページ */
.p-property-search-entrance-type {
	flex-direction: row-reverse;
}

.p-cb-news {
	padding: 95px 0;
	background: #f6f6f6;
}

@media (max-width: 767px) {

	.p-cb-news {
		padding: 35px 0;
	}

}

/* 相続・賃貸管理 */
.background-column .post_col-2 {
	padding: 1rem;
	background: #f6f4f1;
}

.background-column strong {
	display: block;
	color: #b78a24;
}

/* 物件検索結果 */
@container main (min-width: 601px) {

	.p-property-cards-type1 .p-property-cards-item-link {
		grid-template-columns: repeat(2, minmax(0, 160px));
	}

}

/* 会社概要 */
.map {
	width: 100%;
	height: 20rem;
}

.map iframe {
	width: 100%;
	height: 100%;
}

/* お問い合わせ */
.contact-button-wrap {
	width: 100%;
	display: grid;
	gap: 1.5rem;
}

.contact-button-wrap .tcdce-button-wrapper{
	margin-bottom: 0.5rem;
}

.contact-button-wrap :is( .tcdce-button ):not(.wp-block-button) {
	width: 100% !important;
	min-width: initial !important;
}

.contact-complement {
	font-size: 0.75em;
	text-align: center;
}

@media (min-width: 768px) {

	.contact-button-wrap {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5rem;
	}

}

/* プライバシーポリシー */
.privacy-policy-wrap h2 {
	text-align: left;
}

.privacy-policy-wrap h3 {
	margin-top: 2.5rem;
}

.privacy-policy-wrap ol {
	margin: 1rem 0;
}

/* パターン（トップページ） */
.banner-area1 {
	margin-bottom: 1rem;
	display: grid;
	gap: 1rem;
}

.banner-area2 {
	display: grid;
	gap: 1rem;
}

.banner-area a {
	transition: opacity 0.25s;
}

.banner-area a:hover {
	opacity: 0.75;
}

@media (min-width: 601px) {

	.banner-area1 {
		grid-template-columns: repeat(3, 1fr);
	}

	.banner-area2 {
		grid-template-columns: repeat(2, 1fr);
	}

}