/*
Template: businesspress
Theme Name: BusinessPress Child
*/

/* PC・タブレットで表示（スマホ 767px 以下で非表示） */
@media screen and (max-width: 767px) {
	.u-hidden-sp {
		display: none !important;
	}
}

/* スマホで表示（PC・タブレット 768px 以上で非表示） */
@media screen and (min-width: 768px) {
	.u-hidden-pc {
		display: none !important;
	}
}

.sp-show {
	display: none;
}

.sp-none {
	display: block;
}

@media screen and (max-width: 767px) {
	.sp-show {
		display: block;
	}

	.sp-none {
		display: none;
	}
}

@media screen and (min-width: 782px) {
	.main-header {
		padding-bottom: 8px !important;
		padding-top: 6px !important;
	}
}

.site-header {
	margin-bottom: 2rem;
}

/* パンくずリスト
------------------------------------------------------------ */
.breadcrumb ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
	font-size: 14px;
}

@media screen and (max-width: 767px) {
	.breadcrumb ul {
		font-size: 12px;
	}
}

.breadcrumb li {
	display: flex;
	align-items: center;
	color: #666;
}

/* 区切り文字（ > ）の設定 */
.breadcrumb li:not(:last-child)::after {
	content: ">";
	margin: 0 10px;
	color: #ccc;
	font-size: 14px;
}

.breadcrumb li a {
	color: #333;
	text-decoration: none;
}

.breadcrumb li a:hover {
	text-decoration: underline;
}


/* トップページ
------------------------------------------------------------ */
.home-header-overlay {
	background-color: rgb(0 0 0 / 20%) !important;
}

@media screen and (min-width: 980px) {
	.home-header-content {
		padding-bottom: 280px !important;
		padding-top: 280px !important;
	}

	.wp-block-cover, .wp-block-cover-image {
		min-height: 500px;
	}
}

input[type="tel"] {
	border: solid 1px #e6e6e6;
	color: #777;
	margin-top: 0.6em;
	padding: 0.6em;
}

.wpcf7-form p {
	margin-bottom: 4px !important;
}

.wpcf7-form-control.wpcf7-textarea {
	resize: vertical;
	height: 150px;
}

.wpcf7-form-control.wpcf7-textarea {
  display: block;
  width: 100% !important;
  box-sizing: border-box;
}

.contact-label-custom-status {
	padding-top: 30px;
    display: block;
}
.contact-label-custom-detail {
	padding-top: 20px;
    display: block;
}

.contact-required {
	color: red;
}

.form-address-area {
	height: 78px !important;
}


.wide-content {
	width: 1120px;
	margin-left: calc(50% - 1120px / 2);
	margin-bottom: 120px;
}

@media screen and (max-width: 1024px) {
	.wide-content {
		width: initial;
		margin-left: initial;
	}
}

/* カラムが2列（50%）設定の時、最後が1つ余ったら中央寄せにする */
.center-last-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.center-last-item>.wp-block-column {
	flex-basis: 50% !important;
	flex-grow: 0 !important;
}

/* 会社概要ページ
------------------------------------------------------------ */
@media screen and (max-width: 767px) {
	.company-greeting-text {
		text-align: left;
	}
}


/* 施工事例一覧
------------------------------------------------------------ */
.works-archive .page-title {
	font-size: 2rem;
}

.works-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
}

@media screen and (max-width: 1024px) {
	.works-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 767px) {
	.works-list {
		grid-template-columns: 1fr;
	}
}

.works-list.--top {
	grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 767px) {
	.works-list.--top {
		grid-template-columns: repeat(2, 1fr);
	}
}

.work-item {
	border: 1px solid #ddd;
	overflow: hidden;
	background: #fff;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
}

@media screen and (max-width: 767px) {
	.work-item:not(.--top):not(:last-child) {
		margin-bottom: 40px;
	}
}

.work-item:not(.--top):hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.work-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.work-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.work-thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f5f5f5;
}

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

.work-title {
	font-size: 1.2rem;
	font-weight: 600;
	text-align: center;
	padding: 1rem;
	margin: 0 auto;
}

.work-category {
	font-size: 12px;
	text-align: center;
	padding: 6px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 5px;
	background: #1f1f1f;
	color: #fff;
}

@media screen and (max-width: 1024px) {
	.work-category {
		left: 0;
	}
}

.work-category.--single {
	position: relative;
	display: inline-block;
	margin-bottom: 10px;
}

.work-link .work-category {
	left: 0;
}

.work-category-list {
	display: flex;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin-bottom: 3rem;
	margin-left: 0px;
	flex-wrap: wrap;
}

.work-category-list a {
	padding: 0.4em 1em;
	border: 1px solid #ccc;
	border-radius: 20px;
	text-decoration: none;
	color: #333;
	font-size: 1.2rem;
}

.work-category-list a.is-active {
	background-color: #333;
	color: #fff;
	border-color: #333;
}

.work-category-list a:hover {
	background-color: #333;
	color: #fff;
	border-color: #333;
}


/* 施工事例詳細
------------------------------------------------------------ */
.work-single {
	width: 930px;
	margin-left: calc(50% - 930px / 2);
	margin-bottom: 120px;
}

@media screen and (max-width: 1024px) {
	.work-single {
		width: initial;
		margin-left: initial;
	}
}

.work-single .work-title {
	font-size: 2rem;
	padding-top: 45px;
}

.work-single-inner {
	position: relative;
}

.work-gallery-main {
	text-align: center;
}

.work-gallery-main img {
	width: 100%;
	max-width: 920px;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	display: block;
	margin: 0 auto 1rem;
}

/* --- サムネイルエリア --- */
.work-gallery-thumbs {
	display: flex;
	gap: 0.8rem;
	flex-wrap: wrap;
	margin-top: 15px;
	width: 100%;
	/* メイン画像と同じ幅に制限 */
	box-sizing: border-box;
}

.work-gallery-thumbs img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border 0.3s ease;
	flex-shrink: 0;
}

/* --- タブレット・スマホ時（1024px以下） --- */
@media screen and (max-width: 1024px) {
	.work-gallery-thumbs {
		gap: 0.7rem;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 15px;
		-webkit-overflow-scrolling: touch;

		/* はみ出しを解消するためにリセット */
		margin-right: 0;
		padding-right: 0;
		width: 100%;
	}

	.work-gallery-thumbs img {
		/* メイン画像の幅に対して「4枚見えて、5枚目が少しはみ出す」くらいのバランス */
		width: 23%;
		min-width: 80px;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/* スクロールバーのデザイン */
	.work-gallery-thumbs::-webkit-scrollbar {
		height: 4px;
	}

	.work-gallery-thumbs::-webkit-scrollbar-thumb {
		background: #ddd;
		border-radius: 10px;
	}
}

.work-gallery-thumbs img.active {
	border-color: #333;
}

.work-description {
	margin-top: 30px;
}

.work-back-button {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
}


/* 問い合わせセクション
------------------------------------------------------------ */
.cta-contact {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	max-width: none;
	background-image: url('assets/AdobeStock_1628293417.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.cta-contact-inner {
	background-color: rgba(51, 51, 51, 0.5);
	color: #fff;
	text-align: center;
	padding-top: 120px;
	padding-bottom: 120px;
	margin-top: 50px;
}

@media screen and (max-width: 767px) {
	.cta-contact-inner {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.has-text-align-center.has-large-font-size {
		font-size: 25px !important;
		margin-bottom: 20px;
	}
}

/* お知らせ一覧
------------------------------------------------------------ */
.news-sec .post-list {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 40px;
}

.news-sec .post-item {
	margin-bottom: 1rem;
	display: flex;
	gap: 1rem;
	align-items: center;
	color: inherit;
	border-bottom: solid 1px #eee;
	padding-bottom: 10px;
}

.news-sec .post-item a {
	text-decoration: none;
	color: inherit;
}

.news-sec .post-date,
.news-sec .post-category {
	font-size: 1.2rem;
	color: #666;
}

.news-sec .post-title {
	font-size: 1.4rem;
	font-weight: 500;
}


.news-sec .post-date,
.news-sec .post-category,
.news-sec .post-title {
	margin: 0;
	line-height: 1.5;
}

.news-sec .post-category {
	font-size: 1rem;
	border: 1px solid #d1d1d1;
	padding: 0px 8px;
}

.news-sec .post-title {
	padding-left: 10px;
}

.news-sec .pagination {
	/* text-align: center; */
	margin-bottom: 100px;
}

.entry-content li p {
  margin-bottom: 0px !important;
}


/* ページ内リンク */
.section-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

.section-links li {
	margin: 0;
}

.section-links a {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border-radius: 9999px;
	color: #333;
	text-decoration: none;
	font-size: 1.2rem;
	transition: all 0.3s ease;
	border: 1px solid #ddd;
}

.section-links a:hover {
	background-color: #333;
	color: #fff;
	border-color: #333;
}

.pagination .nav-links {
	margin-top: 50px;
}

/* 管理画面 施工事例画像サイズ */
.smart-cf-field-type-image .smart-cf-upload-image img {
	height: 500px;
}

/* 汎用 */
.mb-4 {
	margin-bottom: 4px;
}

.mb-8 {
	margin-bottom: 8px;
}

.mb-10 {
	margin-bottom: 10px;
}

.mt-4 {
	margin-top: 4px;
}

.mt-8 {
	margin-top: 8px;
}

.mt-10 {
	margin-top: 10px;
}

.w-55 {
	width: 55% !important;
}

/* トップページサービス */
.custom-card-wrap.wp-block-columns {
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
	max-width: 1000px !important;
}

.custom-card-wrap.--bottom {
	max-width: 800px !important;
}

/* カード自体の高さを出し、中身を上下左右中央に配置 */
.custom-card {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 60px !important;
	padding: 0 !important;
	border: 1px solid #888;
	border-radius: 10px;
}

/* 中にあるテキストの余白を完全に消す */
.custom-card p {
	margin: 0 !important;
	line-height: 1 !important;
}

/* スマホ表示（767px以下）の制御 */
@media (max-width: 767px) {

	/* カラムの親要素をFlexboxで横並び・折り返しに固定 */
	.custom-card-wrap.wp-block-columns {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 0 !important;
		width: 100% !important;
	}

	/* 各カラムを強制的に「2列（50%）」にする */
	/* 標準の100%設定を!importantで潰します */
	.custom-card-wrap .wp-block-column {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
		margin: 0 !important;
		padding: 5px !important;
		box-sizing: border-box !important;
	}

	/* 2段目（--bottom）も同様に制御 */
	.custom-card-wrap.--bottom .wp-block-column {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}

	.custom-card-wrap:not(.--bottom) {
		margin-bottom: 0px;
	}

	.custom-card-wrap.--bottom {
		margin-bottom: 15px;
	}

	/* カード自体の高さと中央揃え */
	.custom-card {
		height: 100% !important;
		min-height: 40px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 14px;
	}
}

@media screen and (max-width: 767px) {
	.test-header {
		min-height: 320px !important;
	}
}

.test-top-service {
	padding: 8px !important;
}

.test-top-service-lead {
	margin-top: 25px;
	margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
	.test-top-service-lead {
		font-size: 18px !important;
	}

	.test-top-service-text {
		font-size: 14px !important;
		margin-bottom: 18px;
	}
}

/* 問い合わせページ
------------------------------------------------------------ */
.contact-submit {
	width: 150px;
	margin-top: 25px;
}

@media screen and (max-width: 767px) {
	.contact-submit {
		width: 100%;
	}
}

.contact-notice {
	font-size: 14px;
	margin-top: 16px;
	color: #888;
}

@media screen and (max-width: 767px) {
	.contact-notice {
		margin-top: 0px;
	}
}

/* 施工カテゴリチェック */
[data-name="your-service"] {
	display: flex;
	margin-bottom: -20px;
	margin-top: 10px;
	font-weight: 400;
}

[data-name="your-service"] .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 10px 0
}

[data-name="your-service"] .wpcf7-list-item {
	flex: 0 0 33.3%;
	margin: 0;
	box-sizing: border-box;
}

@media screen and (max-width: 767px) {
	[data-name="your-service"] .wpcf7-list-item {
		flex: 0 0 50%;
	}
}

[data-name="your-service"] .wpcf7-list-item label {
	display: flex;
	align-items: center;
	white-space: nowrap;
}

[data-name="your-service"] .wpcf7-list-item input[type="checkbox"] {
	margin-right: 8px;
	cursor: pointer;
}


/* お住まい状況ラジオ */
[data-name="your-building"] {
	display: flex;
	margin-bottom: -10px;
	margin-top: 10px;
	font-weight: 400;
}

[data-name="your-building"] .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

[data-name="your-building"] .wpcf7-list-item {
	flex: 0 0 50%;
	margin: 0;
}

[data-name="your-building"] .wpcf7-list-item input[type="radio"] {
	margin-right: 8px;
	cursor: pointer;
}

[data-name="your-building"] .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

[data-name="your-building"] .wpcf7-list-item {
	margin-left: 0;
}

[data-name="your-building"] .wpcf7-list-item.first {
	margin-bottom: 8px;
}

@media screen and (max-width: 767px) {
	[data-name="your-building"] .wpcf7-list-item {
		flex: 0 0 100%;
		margin-bottom: 8px;
	}
}

/* お問い合わせリード文 */
.contact-lead-text {
	font-size: 20px;
	font-weight: bold;
}

@media screen and (max-width: 767px) {
	.contact-lead-text {
		font-size: 15px;
	}
}

/* 項目名 */
.wpcf7-form p>label {
	font-weight: 800;
	color: #595959;
}

/* スマホ時の調整 */
@media screen and (max-width: 767px) {

	.wpcf7-form-control-wrap input[type="text"],
	.wpcf7-form-control-wrap input[type="email"],
	.wpcf7-form-control-wrap input[type="tel"] {
		width: 100%;
	}
}

/* --------------------------------------- */
/* トップページサービスセクション案2 */
.top-service-sec {
	padding: 10px;
	background: #f5f6f8;
}

.top-service-section {
	margin: 0 auto;
	padding: 0 10px 10px 10px;
	text-align: center;
}

/* 3カラムグリッド */
.top-service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 25px;
}

/* カラム（紹介パネル） */
.group-panel {
	background: #fff;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* グループタイトル */
.group-header {
	font-weight: bold;
	padding: 12px 0;
}

/* 代表画像：21:9で高さを抑える */
.group-img {
	width: 100%;
	aspect-ratio: 3 / 2;
	background: #eee;
	overflow: hidden;
}

.group-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.category-list {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.category-item {
	font-size: 16px;
	font-weight: bold;
	padding: 3px 0;
	border-bottom: 1px dashed #eee;
	text-align: center;
}

.category-item:last-child {
	border-bottom: none;
}

.lead-text {
	line-height: 1.6;
	margin: 20px 0;
}


.top-service-sec.--2 {
	background: #f2f9fe;
	padding: 10px 20px;
}


/* 3カラムレイアウト */
.service-grid {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 20px;
	margin-bottom: 50px;
}

.service-card {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	flex: 1;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease;
}

.service-card.main-focus {
	transform: scale(1.1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 10;
}

.card-img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.card-content {
	padding: 25px;
	text-align: center;
	flex-grow: 1;
}

.card-tagline {
	display: block;
	font-size: 1rem;
	color: #888888;
	margin-bottom: 10px;
}

.card-title {
	font-weight: bold;
	margin-bottom: 15px;
	border-bottom: 1px solid #dbdbdb;
	padding-bottom: 10px;
}

.card-items {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 1.25rem;
}

.card-items li {
	margin-bottom: 8px;
	border-bottom: 1px solid #dbdbdb;
	/* border-radius: 5px; */
	padding: 10px;
}

/* 下部テキスト */
.bottom-message {
	text-align: center;
	max-width: 700px;
	margin: 60px auto 0;
}

.bottom-message h3 {
	font-size: 1.4rem;
	color: var(--text-color);
	margin-bottom: 20px;
}

.mv-cover img {
	object-position: 50% 32%;
}

.mv-title {
	background: #ffffffa6;
	color: #1f1f1f !important;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	font-weight: 800;
	padding-left: 40px;
	padding-right: 40px;
}

@media screen and (max-width: 767px) {
	.has-text-align-center.has-large-font-size.mv-title {
		font-size: 22px !important;
		padding-left: 10px;
		padding-right: 10px;
	}
}