/*
Theme Name: Lightning
Text Domain: lightning
Theme URI: https://lightning.vektor-inc.co.jp/en/
Description: Lightning is a very simple & easy to customize theme which is based on the Bootstrap. It is also very friendly with custom post types and custom taxonomies. When you add a new one, the breadcrumbs will be adjusted and posts will look beautifully without editing or adding a template files.
Author: Vektor,Inc.
Author URI: https://www.vektor-inc.co.jp
Version: 15.33.1
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Lightning WordPress theme, Copyright (C) 2015-2026 Vektor,Inc.
Lightning WordPress theme is licensed under the GPL.

Lightning WordPress Theme bundles the following third-party resources:

Font Awesome icon font, Copyright 2012 Fonticons, Inc.
its fonts are licensed under the terms of the SIL OFL License 1.1, and its code is licensed under the terms of the MIT license
Source: https://fontawesome.com/

Bootstrap framework, Copyright 2011 Bootstrap Authors and Twitter, Inc.
Bootstrap is licensed under the terms of the MIT license
Source: https://getbootstrap.com/

CSS Simple Tree Shaking
CSS Simple Tree Shaking is licensed under the terms of the GNU General Public License v2 license
Source: https://celtislab.net/
*/

/**
 * ひかり不動産 専用カスタムスタイル
 *
 * このスタイル定義は Lightning テーマ上に「ひかり不動産」専用の
 * デザインコンセプト（親しみやすさ × 信頼感）を反映させるためのものです。
 * 既存の Lightning のスタイルを大きく崩さないようにしつつ、
 * トップページおよび共通パーツの見た目を調整します。
 *
 * 主な仕様:
 * - メインカラー: #F5B800
 * - メイン暗色（ホバーなど）: #D4A000
 * - 背景色: #FFFFFF / セクション背景: #FFF8E1
 * - 文字色: #333333（本文）、#666666（補助テキスト）
 */

/* ------------------------------------
 * セクション共通レイアウト
 * ------------------------------------ */

.sectionPadding {
	padding: 80px 16px;
}

.sectionInner {
	max-width: 1040px;
	margin: 0 auto;
}

.sectionHeader {
	text-align: center;
	margin-bottom: 48px;
}

.sectionTitle {
	font-size: 2rem;
	font-weight: 700;
	color: #333333;
	margin-bottom: 16px;
}

.sectionLead {
	font-size: 0.95rem;
	color: #666666;
	line-height: 1.8;
}

/* ------------------------------------
 * ボタン共通
 * ------------------------------------ */

.primaryButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	border-radius: 999px;
	background-color: #F5B800;
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	border: none;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.primaryButton:hover {
	background-color: #D4A000;
	transform: translateY(-1px);
}

.primaryButton.isReverse {
	background-color: #ffffff;
	color: #F5B800;
	border: 2px solid #ffffff;
}

.secondaryButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 28px;
	border-radius: 999px;
	background-color: transparent;
	color: #F5B800;
	border: 1px solid #F5B800;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.secondaryButton:hover {
	background-color: #F5B800;
	color: #ffffff;
}

/* ------------------------------------
 * ヒーロー
 * ------------------------------------ */

.heroSection {
	position: relative;
	min-height: 520px;
	color: #ffffff;
	/* 背景画像はカスタマイザー「ひかり不動産設定」で指定された URL を優先的に使用します。 */
	background-size: cover;
	background-position: center;
}

.heroSectionOverlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.55),
		rgba(0, 0, 0, 0.35)
	);
}

.heroSectionInner {
	position: relative;
	max-width: 1040px;
	margin: 0 auto;
	padding: 120px 16px 96px;
	display: flex;
	align-items: center;
}

.heroContent {
	max-width: 560px;
}

.heroSubtitle {
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	margin-bottom: 12px;
}

.heroTitle {
	font-size: 2.4rem;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 16px;
}

.heroText {
	font-size: 0.95rem;
	line-height: 1.9;
	margin-bottom: 24px;
}

.heroActions {
	display: flex;
}

/* ------------------------------------
 * 3つの強み
 * ------------------------------------ */

.strengthSection {
	background-color: #ffffff;
}

.strengthList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.strengthItem {
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
	padding: 24px 20px;
	text-align: left;
}

.strengthIcon {
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background-color: #FFF8E1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.strengthIconShape {
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background: linear-gradient(135deg, #F5B800, #D4A000);
}

.strengthTitle {
	font-size: 1.05rem;
	font-weight: 700;
	color: #333333;
	margin-bottom: 8px;
}

.strengthText {
	font-size: 0.9rem;
	color: #666666;
	line-height: 1.8;
}

/* ------------------------------------
 * 事業内容サマリー
 * ------------------------------------ */

.serviceSummarySection {
	background-color: #FFF8E1;
}

.serviceSummaryColumns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.serviceSummaryItem {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 24px 20px;
}

.serviceSummaryTitle {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 12px 0;
}

.serviceSummaryText {
	font-size: 0.9rem;
	color: #666666;
	line-height: 1.8;
	margin-bottom: 16px;
}

.serviceSummaryMoreLink {
	font-size: 0.9rem;
	color: #F5B800;
	text-decoration: none;
}

/* ------------------------------------
 * 会社紹介サマリー
 * ------------------------------------ */

.companyIntroSection {
	background-color: #ffffff;
}

.companyIntroBody {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.companyIntroText {
	font-size: 0.95rem;
	color: #666666;
	line-height: 1.9;
	margin-bottom: 24px;
}

/* ------------------------------------
 * トップ専用 CTA
 * ------------------------------------ */

.topCtaSection {
	background-color: #F5B800;
	color: #ffffff;
}

.topCtaInner {
	max-width: 960px;
	margin: 0 auto;
	padding: 56px 16px;
}

.topCtaTitle {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.topCtaText {
	font-size: 0.95rem;
	line-height: 1.8;
	margin-bottom: 24px;
}

/* ------------------------------------
 * 共通 CTA バナー
 * ------------------------------------ */

.pageCta {
	background-color: #FFF8E1;
}

.pageCtaInner {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.pageCtaTitle {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.pageCtaText {
	font-size: 0.95rem;
	color: #666666;
	line-height: 1.9;
	margin-bottom: 20px;
}

/* ------------------------------------
 * フッター
 * ------------------------------------ */

.site-footer {
	background-color: #333333;
	color: #ffffff;
	padding-top: 40px;
	padding-bottom: 24px;
}

.site-footer a {
	color: #ffffff;
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

.site-footer-content {
	margin-bottom: 16px;
}

.footerColumn {
	margin-bottom: 24px;
}

.footerCompanyName {
	font-weight: 700;
	margin-top: 8px;
	margin-bottom: 8px;
}

.footerCompanyAddress,
.footerCompanyContact {
	font-size: 0.85rem;
	line-height: 1.7;
	margin-bottom: 4px;
}

.accessMap iframe,
.contactSmallMap iframe {
	width: 100%;
	max-width: 100%;
	height: 260px;
}

.footerNavTitle,
.footerHoursTitle {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.footerNavList {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.footerNavItem {
	font-size: 0.9rem;
	margin-bottom: 4px;
}

.footerHoursText {
	font-size: 0.85rem;
	line-height: 1.7;
}

.footerCopyright {
	font-size: 0.8rem;
	text-align: center;
	margin: 0;
	color: #cccccc;
}

/* ------------------------------------
 * フル幅セクション（背景だけ横幅いっぱい）
 * ------------------------------------ */

.sectionFull,
.pageCta {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

/* ------------------------------------
 * ヘッダー（ひかり不動産用カスタム）
 * ------------------------------------ */

.site-header {
	background-color: #F5B800;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.site-header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 4px;
	padding-bottom: 4px;
}

.site-header-main {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
}

.site-header-logo span,
.site-header-logo img {
	display: block;
}

.site-header-sub {
	display: flex;
	align-items: center;
	gap: 8px;
}

.headerTelInline {
	font-size: 0.9rem;
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
}

@media (max-width: 991px) {
	.site-header-main {
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}

	.site-header-sub {
		justify-content: flex-end;
	}
}

@media (max-width: 991px) {
	.site-header {
		position: static;
	}
}

/* グローバルナビ調整 */

.global-nav {
	border-top: 1px solid rgba(255, 255, 255, 0.4);
	margin-top: 6px;
	padding-top: 4px;
}

.global-nav-list {
	gap: 8px;
}

.global-nav-list > li > a {
	position: relative;
	padding: 10px 12px;
	font-size: 0.9rem;
	color: #ffffff;
	text-decoration: none;
}

.global-nav-list > li > a::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 4px;
	height: 2px;
	background-color: #F5B800;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.18s ease-out;
}

.global-nav-list > li.current-menu-item > a,
.global-nav-list > li.current_page_item > a {
	color: #333333;
}

.global-nav-list > li.current-menu-item > a::after,
.global-nav-list > li.current_page_item > a::after {
	transform: scaleX(1);
}

.global-nav-list > li > a:hover::after {
	transform: scaleX(1);
}

/* ------------------------------------
 * スタッフ・会社・サービス・問い合わせ・プライバシー固有レイアウト
 * ------------------------------------ */

.companySectionTitle,
.serviceSectionTitle,
.staffSectionTitle {
	font-size: 1.4rem;
	font-weight: 700;
	color: #333333;
	margin-bottom: 16px;
}

.companyMessageColumns {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 32px;
	align-items: center;
}

.companyTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.companyTable th,
.companyTable td {
	border-bottom: 1px solid #e0e0e0;
	padding: 10px 12px;
	vertical-align: top;
}

.companyTable th {
	width: 25%;
	background-color: #fafafa;
	font-weight: 600;
}

.serviceColumns {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
	gap: 32px;
	align-items: center;
}

.serviceImage {
	width: 100%;
	height: auto;
	border-radius: 8px;
	overflow: hidden;
}

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

.serviceAreaList {
	display: flex;
	gap: 12px;
	padding-left: 0;
	list-style: none;
	margin: 16px 0 0;
}

.serviceAreaItem {
	padding: 6px 14px;
	border-radius: 999px;
	background-color: #ffffff;
	border: 1px solid #F5B800;
	font-size: 0.85rem;
}

.flowSteps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	padding-left: 0;
	margin: 24px 0 0;
}

.flowStep {
	background-color: #ffffff;
	border-radius: 14px;
	padding: 20px 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.flowStepNumber {
	font-size: 0.75rem;
	font-weight: 700;
	color: #F5B800;
	margin-bottom: 8px;
}

.flowStepTitle {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.flowStepText {
	font-size: 0.9rem;
	color: #666666;
	line-height: 1.8;
}

.serviceCtaSection,
.staffCtaSection {
	background-color: #FFF8E1;
	text-align: center;
}

.serviceCtaBody,
.staffCtaBody {
	max-width: 640px;
	margin: 0 auto;
}

.serviceCtaTitle,
.staffCtaTitle {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 16px;
}

.staffLeader {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
	align-items: center;
}

.staffName {
	font-weight: 700;
	margin-bottom: 4px;
}

.staffRole {
	font-size: 0.9rem;
	color: #666666;
	margin-bottom: 8px;
}

.staffComment {
	font-size: 0.9rem;
	color: #666666;
	line-height: 1.8;
}

.staffList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.staffItem {
	background-color: #ffffff;
	border-radius: 14px;
	padding: 20px 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.contactColumns {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
	gap: 32px;
}

.contactTel {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 8px 0;
}

.contactFax,
.contactTime {
	font-size: 0.9rem;
	color: #666666;
}

/* お問い合わせフォーム */

.contactForm {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contactFormRow {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.contactFormLabel {
	font-size: 0.9rem;
	font-weight: 600;
	color: #333333;
}

.contactFormRequired {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	font-size: 0.7rem;
	color: #ffffff;
	background-color: #F5B800;
	border-radius: 6px;
}

.contactFormInput,
.contactFormTextarea {
	width: 100%;
	border-radius: 6px;
	border: 1px solid #dddddd;
	padding: 8px 10px;
	font-size: 0.9rem;
	box-sizing: border-box;
}

.contactFormTextarea {
	resize: vertical;
	min-height: 160px;
}

.contactFormOptions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.contactFormOption {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.9rem;
}

.contactFormRow--agree {
	margin-top: 4px;
}

.contactFormAgree {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.85rem;
	color: #666666;
}

.contactFormAgree a {
	color: #F5B800;
	text-decoration: underline;
}

.contactFormRow--submit {
	margin-top: 8px;
}

.contactFormError {
	font-size: 0.8rem;
	color: #d9534f;
}

.contactFormMessage {
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 0.85rem;
}

.contactFormMessage--success {
	background-color: #e6f6e9;
	border: 1px solid #8ad29a;
	color: #256b37;
}

.contactFormMessage--error {
	background-color: #fff1f0;
	border: 1px solid #f5c6cb;
	color: #a94442;
}

@media (max-width: 768px) {
	.companyMessageColumns,
	.serviceColumns,
	.flowSteps,
	.staffLeader,
	.contactColumns {
		grid-template-columns: 1fr;
	}

	.flowSteps {
		gap: 12px;
	}
}

/* ------------------------------------
 * レスポンシブ調整
 * ------------------------------------ */

@media (max-width: 768px) {
	.sectionPadding {
		padding: 56px 16px;
	}

	.heroSectionInner {
		padding: 72px 16px;
	}

	.heroTitle {
		font-size: 1.9rem;
	}

	.strengthList {
		grid-template-columns: 1fr;
	}

	.serviceSummaryColumns {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------
 * モバイルメニューボタンの位置を左上に固定
 * ------------------------------------ */
.vk-mobile-nav-menu-btn.position-right,
.mobile-nav-btn-right .vk-mobile-nav-menu-btn {
	left: 5px !important;
	right: auto !important;
}

/* ------------------------------------
 * モバイルメニューボタン（右上固定＆デザイン上書き）
 * ------------------------------------ */
.vk-mobile-nav-menu-btn,
.vk-mobile-nav-menu-btn.position-right,
.mobile-nav-btn-right .vk-mobile-nav-menu-btn {
	position: fixed;
	top: 8px;
	right: 8px;
	left: auto;
	z-index: 2100;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: none;
	background-color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	background-size: 22px 22px;
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.vk-mobile-nav-menu-btn::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	border-radius: 999px;
	background-color: #333333;
	box-shadow: 0 -6px 0 #333333, 0 6px 0 #333333;
	transform: translate(-50%, -50%);
}

.vk-mobile-nav-menu-btn.menu-open {
	background-color: #F5B800;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transform: translateY(1px);
}

.vk-mobile-nav-menu-btn.menu-open::after {
	width: 20px;
	box-shadow: none;
	background-color: #ffffff;
	transform: translate(-50%, -50%) rotate(45deg);
}

.vk-mobile-nav-menu-btn.menu-open::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	border-radius: 999px;
	background-color: #ffffff;
	transform: translate(-50%, -50%) rotate(-45deg);
}